几个伪选择器

最新推荐文章于 2025-12-15 18:09:20 发布

原创最新推荐文章于 2025-12-15 18:09:20 发布 · 285 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html

1、:root 指HTML

    :root{background: #D1D1B0;}
    
/*    下面错误代码，无法指定div*/
/*
   div:root{width:1000px;
        height: 1000px;
        background: #eee;}
*/

效果

2、:first-child选择第一个元素

    li:first-child,.ss:first-child{
        background: red;
    }   

    .dd:first-child{
        background: green;
    } 
/*    不是小盒子里第一个元素*/
    .pp:first-child{
        background: yellow;
    }

效果

3、 :last-child选择最后一个元素

  li:last-child,.ss:last-child{
        background: red;
    }   

    .dd:last-child{
        background: green;
    } 

    .pp:last-child{
        background: yellow;
    } 
     
    i{background: green}

效果

4、:nth-child(n)选择自主选择的元素

     li:nth-child(3),.ss:nth-child(3){
        background: red;
    }   

    .dd:nth-child(3){
        background: green;
    } 
/*   pp 不是小盒子里第3个元素*/
    .pp:nth-child(3){
        background: red;
    }

效果

5、:nth-child(even)选择机器数字的奇数

（零基索引读取方式，我叫机器数字方便我自己记住）

     li:nth-child(even),.ss:nth-child(even){
        background: blue;
    }   
/*   dd不是机器数字的奇数*/
    .dd:nth-child(even){
        background: green;
    } 
/*    不是小盒子里第一个元素*/
    .pp:nth-child(even){
        background: yellow;
    }

效果

6、:nth-child(odd)选择机器数字的偶数

    li:nth-child(odd),.ss:nth-child(odd){
        background: red;
    }   

    .dd:nth-child(odd){
        background: green;
    } 

    .pp:nth-child(odd){
        background: blue;
    }

效果