CSS伪类和伪元素

伪类

伪类用于当已有元素处于某种状态时，为其添加对应的样式，这个状态是根据用户行为变化而变化的。比如说 :hover。它只有处于 dom 树无法描述的状态才能为元素添加样式，所以称为伪类。

伪元素

伪元素用于创建一些原本不在文档树中的元素，并为其添加样式，比如说 ::before。虽然用户可以看到这些内容，但是其实他不在文档树中。

区别

伪类的操作对象是文档树中已存在的元素，而伪元素是创建一个文档树外的元素。

css 规范中用双冒号 :: 表示伪元素，用一个冒号 : 表示伪类。

CSS3 新增伪类

• elem:nth-child(n): 选中父元素下的第 n 个标签名为 elem 的元素；

• elem:nth-last-child(n): 作用同上，从后开始查找；

• elem:last-child：最后一个子元素；

• elem:only-child：如果 elem 是父元素下唯一的子元素，则选中；

• elem:nth-of-type(n)：选择父元素下第 n 个 elem 类型元素；

• elem:empty：选中不包含子元素和内容的 elem 类型元素；

• :not(elem)：选择非 elem 元素的每个元素；

• :enabled：启用状态的表单组件