[CSS]伪类选择器

文章目录

一、伪类选择器是什么？

二、第一种伪类

1.    :first-child{}

2.    :last-child{}

3.    :nth-child(n){},(n为具体数字)

1.     :nth-child(n){}

2.    :nth-child(n){}。

3.    :nth-child(2n){}

4.    :nth-child(even){}

5.    :nth-child(2n+1){}

6.    :nth-child(odd){}

三、第二种伪类

1.    first-of-type

2.    last-of-type{} 

3.    nth-of-type(n){},(n为具体数字) 

1.     :nth-of-type(n){}

2.    :nth-of-type(n){}。

3.    :nth-of-ype(2n){}

4.    :nth-of-type(even){}

5.    :nth-of-type(2n+1){}

6.    :nth-od-type(odd){}

 四、第三种伪类

1.    :not(){}

总结

---

一、伪类选择器是什么？

伪类选择器简称“伪类”，伪类是一种不存在的类，伪类用来表示元素的一种状态。

二、第一种伪类

1.    :first-child{}

:first-child{},用来选择父元素下的第一个子元素。

注意：:first-child{}是根据父元素下所有子元素进行排序。

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

运行结果如下：

 

 代码如下：

    
    
    


    

        
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

运行结果如下：

 

---

2.    :last-child{}

:last-child{},用来选择父元素下的最后一个子元素。

注意：:last-child{}是根据父元素下所有子元素进行排序

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

运行结果如下：

 

---

3.    :nth-child(n){},(n为具体数字)

:nth-child(){},用来选择父元素下的第n个子元素。

注意：:nth-child(){}是根据父元素下所有子元素进行排序

1.     :nth-child(n){}

:nth-child(n){}，选中父元素第n个子元素，n为一个具体数字。

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

运行结果如下：

 

---

2.    :nth-child(n){}。

 :nth-child(n){}，选中父元素下所有子元素，n为字母。

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

 运行结果如下：

---

3.    :nth-child(2n){}

:nth-child(2n){}，选中父元素下偶数行的子元素。

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

运行结果如下：

 

 

---

4.    :nth-child(even){}

:nth-child(even){}，选中父元素下偶数行的子元素

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

运行结果如下：

 

---

5.    :nth-child(2n+1){}

:nth-child(2n+1){}，选中父元素下奇数行的子元素。

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

 运行结果如下：

---

6.    :nth-child(odd){}

:nth-child(odd){}，选中父元素下奇数行的子元素。

 代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

运行结果如下:

 

---

三、第二种伪类

1.    first-of-type

:first-of-type{},用来选择父元素下的第一个子元素。

注意：:first-of-type{}是根据父元素下所有同类型的子元素进行排序。

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

 运行结果如下：

 

---

2.    last-of-type{} 

:last-of-type{},用来选择父元素下的最后一个子元素。

注意：:last-of-type{}是根据父元素下所有同类型的子元素进行排序。

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

 运行结果如下：

 

---

3.    nth-of-type(n){},(n为具体数字) 

:nth-of-type(n){},用来选择父元素下的第n个子元素。

注意：:nth-of-stype(n){}是根据父元素下同类型的子元素进行排序

1.     :nth-of-type(n){}

:nth-of-type(n){}，选中父元素第n个子元素，n为一个具体数字。

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

 运行结果如下：

 

---

2.    :nth-of-type(n){}。

 :nth-of-type(n){}，选中父元素下所有子元素，n为字母。

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

 运行结果如下：

---

3.    :nth-of-ype(2n){}

:nth-of-type(2n){}，选中父元素下偶数行的子元素。

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

 运行结果如下：

---

4.    :nth-of-type(even){}

:nth-of-type(even){}，选中父元素下偶数行的子元素

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

 运行结果如下：

---

5.    :nth-of-type(2n+1){}

:nth-of-type(2n+1){}，选中父元素下奇数行的子元素。

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

 运行结果如下：

---

6.    :nth-od-type(odd){}

:nth-of-type(odd){}，选中父元素下奇数行的子元素。

代码如下:

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

运行结果如下：

 

---

 四、第三种伪类

1.    :not(){}

:not(n){}否定类，将复合的元素去除，n为指定数值。

代码如下：

    
    
    


    

        
《早发白帝城》
        
唐·李白
        
朝辞白帝彩云间，
        
千里江陵一日还。
        
两岸猿声啼不住，
        
轻舟已过万重山。
    

 运行结果如下：

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了伪类选择器的使用，原对您有所帮助，接下来将继续介绍其它选择器