zoukankan      html  css  js  c++  java
  • CSS3 新增选择器:伪类选择器和属性选择器

    一、结构(位置)伪类选择器( : )

    1、:first-child

    2、:last-child

    3、:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1)

    <body>
        <ul>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
            <li>我是第四个</li>
            <li>我是第五个</li>
            <li>我是第六个</li>
            <li>我是第七个</li>
            <li>我是第八个</li>
            <li>我是第九个</li>
            <li>我是第十个</li>
        </ul>
    </body>
    <style>
            ul li:first-child{
                /* 选择第一个li */    
                background: rgb(228, 22, 22);
            }
            ul li:last-child {
                /* 选择最后一个li */
                background: rgb(109, 18, 212);
            }
            ul li:nth-child(6){
                /* 选择第n个li */
                background: rgba(140, 214, 19);
            }
            ul li:nth-child(2n){
                /* 选择偶数li(注:n=0,1,2,3,4……) */
                font-size: 20px;
            }
            ul li:nth-child(2n+1){
                /* 选择奇数li(注:n=0,1,2,3,4……) */
                font-size: 12px;
            }
        </style>

    二、属性选择器([   ])

    1、[ 属性  ]

    2、可以和正则表达式混用,如 $ ^   * 

    <body>
        <ul>
            <li class="test">我是第一个</li>
            <li class="two123">我是第二个</li>
            <li class="twotabc">我是第三个</li>
            <li class="abcfour">我是第四个</li>
            <li class="ggg-four">我是第五个</li>
            <li class="bug">我是第六个</li>
            <li class="bug_ee">我是第七个</li>
            <li class="hhbug">我是第八个</li>
            <li class="bug345">我是第九个</li>
            <li class="test">我是第十个</li>
        </ul>
    </body>
    <style>
            ul li[class=test] {
                /* 选择有属性为class=test的li(第一个和第十个) */
                background: rgb(206, 25, 25);
            }
            ul li[class$=four]{
                /* 选择属性里结尾有four的类名的li(第四个和第五个)*/
                background: rgb(106, 9, 216);
            }
            ul li[class^=two]{
                /* 选择属性里开头有two的类名的li(第二个和第三个) */
                background: rgb(54, 201, 10);
            }
            ul li[class*=bug]{
                /* 选择属性里所有带有bug的类名的li(第六、七、八、九个) */
                font-size: 30px;
            }
     </style>

  • 相关阅读:
    河南省第十届ACM省赛G:Plumbing the depth of lake
    南洋理工oj 题目92 图像有用区域
    初学欧拉图,知识总结,后续增加
    初学并查集知识总结后续增加
    南阳oj 题目42 一笔画问题
    南阳oj 题目 90 整数划分
    南阳oj题目20吝啬的国度 菜鸟的进阶之路
    南阳oj 题目21 三个水杯
    UVA-540 Team Queue
    HDU-1596 find the safest road
  • 原文地址:https://www.cnblogs.com/EricZLin/p/8856614.html
Copyright © 2011-2022 走看看