本文共 1376 字，大约阅读时间需要 4 分钟。
一. 伪类选择器
基本概念： CSS伪类用于为某些选择器添加特殊效果，通过在DOM中插入修饰类元素实现。这些修饰类元素对用户可见，但对DOM不可见。伪类的效果通常可通过添加实际类名实现。
1.1 动态伪类选择器
根据用户行为定义元素状态的伪类选择器：
- E:link：定义未访问的链接状态。
- E:visited：定义已访问的链接状态。
- E:active：定义鼠标点击未抬起时的状态。
- E:hover：定义鼠标悬停时的状态。
- E:focus：定义鼠标点击后抬起时的状态。
注意：超链接伪类选择器需按顺序使用，a:hover应放在a:link和a:visited之后，a:active应放在a:hover之后以确保有效性。
可优化方式：将相同样式合并至a:hover选择符下，并使用hover属性简化代码。
1.2 结构伪类选择器
用于根据元素位置或类型选择特定元素的伪类选择器：
- E:first-child：选择父元素的第一个子元素。
- E:last-child：选择父元素的最后一个子元素。
- E:root：选择匹配元素的根元素（通常为HTML根元素html）
- E F:nth-child(n)：选择父元素E的第n个子元素F（n从1开始）
- E F:nth-last-child(n)：选择父元素E的倒数第n个子元素F
- E:nth-of-type(n)：选择父元素中具有指定类型的第n个E元素
- E:nth-last-of-type(n)：选择父元素中具有指定类型的倒数第n个E元素
- E:first-of-type：选择父元素中第一个匹配E的元素
- E:last-of-type：选择父元素中最后一个匹配E的元素
- E:only-child：选择父元素只含有一个子元素且该子元素匹配E的元素
- E:only-of-type：选择父元素中只含有一个与自己类型相同的子元素
- E:empty：选择没有子元素且不含文本的空元素
注意：结构伪类选择器中的子元素编号从1开始，需避免n值为0的情况。
1.3 目标伪类选择器
根据链接目标选择匹配元素的伪类选择器：
- E:target：选择匹配E元素且其内容链接指向指定URL的元素
1.4 语言伪类选择器
根据元素语言属性选择特定语言的元素：
- E:lang(language)：选择使用指定语言的元素
1.5 否定伪类选择器
选择不符合特定条件的元素：
1.6 元素状态伪类选择器
用于表单元素的用户状态选择：
- E:checked：选择用户界面中选中状态的表单元素
- E:enabled：选择可用状态的表单元素
- E:disabled：选择不可用状态的表单元素
二. 伪元素选择器
基本概念： CSS伪元素用于在元素中插入特殊内容，通常通过添加实际元素实现，可能会改变DOM结构。
- E::after：在E元素之后插入内容，常与content属性配合使用
- E::before：在E元素之前插入内容
- E::first-letter：为文本元素的第一个字母添加样式
- E::first-line：为文本元素的首行添加样式
- E::selection：为被选中或处于高亮状态的E元素部分添加样式
三. 伪类与伪元素选择器的区别
主要区别在于语法：
- CSS3伪类使用单冒号：
- CSS3伪元素使用双冒号：
转载地址：http://bzxh.baihongyu.com/