5. 第一个与最后一个子元素 :first-child :last-child

CSS Code复制内容到剪贴板

1.   

2.   

   •   

   • Link1
     

   •   

   • Link2
     

   •   

   • Link3
     

   •   

   • Link4
     

   •   

   • Link5
     

     

6. 指定子元素选择器/奇偶选择器 :nth-child(n) :nth-last-child(n)

CSS Code复制内容到剪贴板

1.   

2.   

   •     

   • item1
     

   •     

   • item2
     

   •     

   • item3
     

   •     

   • item4
     

   •     

   • item5
     

   •     

   • item6
     

   •     

   • item7
     

   •     

   • item8
     

   •     

   • item9
     

   •     

   • item10
     

     

7. 第一个与最后一个匹配类型的子元素 first-of-type last-of-type

CSS Code复制内容到剪贴板

1.   

2.   

3.   

4.     

   我是一个块元素，我是.wrapper的第一个子元素
     

5.     

   我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素

     

6.     

   我是一个段落元素

     

7.     

   我是一个块元素
     

8.   

8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)

CSS Code复制内容到剪贴板

1.   

2.   

3.   

4.     

   我是一个Div元素
     

5.     

   我是一个段落元素

     

6.   

7.     

   我是一个Div元素
     

8.     

   我是一个段落

     

9.   

10.     

    我是一个Div元素
      

11.     

    我是一个段落

      

12.   

13.     

    我是一个Div元素
      

14.     

    我是一个段落

      

15.   

16.     

    我是一个Div元素
      

17.     

    我是一个段落

      

18.   

19.     

    我是一个Div元素
      

20.     

    我是一个段落

      

21.   

22.     

    我是一个Div元素
      

23.     

    我是一个段落

      

24.   

25.     

    我是一个Div元素
      

26.     

    我是一个段落

      

27.   

9. 唯一子元素选择器 only-child
匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素

CSS Code复制内容到剪贴板

1.   

2.   

3.   

4.     

   我是一个段落

     

5.     

   我是一个段落

     

6.   

7.   

8.     

   我是一个段落

     

9.   

10. 唯一匹配类型的子元素 only-of-type

CSS Code复制内容到剪贴板

1.   

2.   

3.   

4.     

   我是一个段落

     

5.     

   我是一个段落

     

6.     

   我是一个段落

     

7.     

   我是一个Div元素
     

8.   

9.   

10.     

    我是一个Div
      

11.     

      

    •         

    • 我是一个列表项
      

    •     

      

12.     

    我是一个段落

      

13.   

11. 可用选择器 :enabled

CSS Code复制内容到剪贴板

1.   

2.   

3.   

4.     

     

5.         Text Input:   

6.            

7.        

8.     

     

9.         Text Input:   

10.            

11.        

12.   

12. 不可用选择器 :disabled

CSS Code复制内容到剪贴板

13. 被选中选择器 :checked

CSS Code复制内容到剪贴板

1.   

2.   

3.   

4.        

5.            

6.           √   

7.            

8.         我是选中状态   

9.        

10.   

11.        

12.            

13.           √   

14.            

15.         我是未选中状态   

16.        

17.   

14. 被鼠标选中, 高亮选择器 ::selection

CSS Code复制内容到剪贴板

1.   

2. 拿鼠标选中我, 试试看!

     

15. 只读选择器 :read-only

CSS Code复制内容到剪贴板

1.   

2.   

3.   

4.     

     

5.         姓名:   

6.            

7.        

8.     

     

9.         地址:   

10.            

11.        

12.   

16. 非只读选择器 :read-write

CSS Code复制内容到剪贴板

1.   

2.   

3.   

4.     

     

5.         姓名:   

6.            

7.        

8.     

     

9.         地址:   

10.            

11.        

12.   

关于CSS3中有哪些常用的选择器就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流