几个伪选择器

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;
    }
    

效果

7、:only-child选择盒子的唯一元素

效果