CSS伪类选择器

伪类选择器

1、伪类：不存在的类，特殊的类

伪类用来描述一个元素的特殊状态

例如：第一个元素，被惦记的元素，鼠标移入的元素...

特点：一般情况下，使用开头

        （1）：first-child 第一个元素

代码展示：

 例题：既要是li又是第一个元素 
        li:first-child{
            color: red   
        }

               图片展示：

       （2）：last-child  最后一个元素

                代码展示：

例题：既要是li又是最后一个元素 
        li:last-child{
            color: red   
        }

           图片展示：

 （3）：nth-child   选中第n个子元素

代码段：

 例题：选中li第四个元素字体变为红色 
       li:nth-child(4){
        color: red;       
    }

                 图片展示：  

（4）特殊值：

n    所有的

代码段：

 例题：选中所有的li元素字体变为红色 
       li:nth-child(n){
        color: red;       
    }

图片展示：

（5） 2n或even  选中偶数

代码段：

 li:nth-child(2n){
        color: red;       
    }

   li:nth-child(even){
        color: red;       
    }

图片展示：

（6）2n+1或odd 选中奇数

代码段：

   li:nth-child(odd){
        color: red;       
    }

 li:nth-child(2n+1){
        color: red;       
    }

图片展示：

以上这些伪类都是根据所有的子元素进行排序

其他的伪类选择器：

                1、：fist-of-type  第一个元素

                 2、:last-of-type   最后一个元素

                 3、：nth-of-type()  选中第n个元素

                    功能跟上面相似，

                    不同的是，这是在同类型的子元素中去选择

 二、：not（）否定伪类

            -将符合条件的元素从选择器中去除

代码展示：

例题：ul里面所有的文字，除了‘而不有’，字体都变红 
ul>li:not(.l1),span{
     color:red;
   }

图片展示：