css3 中的伪类和伪元素

什么是伪类，什么是伪元素

伪类是用来添加特殊状态的选择器,它们以冒号(:)开头。伪类可以添加到任何现有的选择器上,用来选择处于特定状态的元素。
伪元素是用来选择元素的特定部分的选择器,它们以双冒号(::)开头。伪元素可以创建出在文档树中不存在的元素。

css3 中常见的伪类:

1. :root - 选择文档的根元素
2. :nth-child(n) - 匹配父元素中的第n个子元素
3. :nth-last-child(n) - 匹配父元素中的倒数第n个子元素
4. :nth-of-type(n) - 匹配父元素中相同类型的第n个子元素
5. :nth-last-of-type(n) - 匹配父元素中相同类型的倒数第n个子元素
6. :first-child - 匹配父元素中的第一个子元素
7. :last-child - 匹配父元素中的最后一个子元素
8. :first-of-type - 匹配父元素中相同类型的第一个子元素
9. :last-of-type - 匹配父元素中相同类型的最后一个子元素
10. :only-child - 匹配父元素中唯一的子元素
11. :only-of-type - 匹配父元素中唯一的相同类型子元素
12. :empty - 匹配没有子元素(包括文本节点)的元素
13. :target - 匹配URL的锚点引用的元素
14. :enabled - 匹配可用的表单控件元素
15. :disabled - 匹配禁用的表单控件元素
16. :checked - 匹配被选中的表单控件元素(如单选框、复选框)
17. :indeterminate - 匹配处于不确定状态的表单控件元素
18. :valid - 匹配通过验证的表单控件元素
19. :invalid - 匹配没有通过验证的表单控件元素
20. :in-range - 匹配其值在指定范围内的元素
21. :out-of-range - 匹配其值超出指定范围的元素
22. :required - 匹配有required属性的表单控件元素
23. :optional - 匹配没有required属性的表单控件元素
24. :read-only - 匹配只读属性为true的表单控件元素
25. :read-write - 匹配可读写的表单控件元素
26. :lang(language) - 匹配指定语言的元素
27. :not(selector) - 匹配不符合指定选择器的元素
28. :hover - 匹配鼠标悬停在其上的元素
29. :active - 匹配当前被激活的元素
30. :focus - 匹配当前获得焦点的元素
31. :visited - 匹配已被访问过的链接元素

CSS3伪元素:

1. ::before - 在元素内容之前插入生成内容
2. ::after - 在元素内容之后插入生成内容
3. ::first-line - 选择元素中的第一行
4. ::first-letter - 选择元素中的第一个字母
5. ::selection - 选择被用户选中的部分
6. ::placeholder - 选择表单控件的占位符