CSS 中的伪类、伪元素总结

Question

老是不记得哪个用双冒号，哪个用单冒号，不知道你们有没有这种困惑。尽管知道是可兼容的，但还是想再整理一下。

一、概念

伪类（pseudo-classes）
用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。

伪元素（pseudo-elements）
用于创建一些不在文档树中的元素，并为其添加样式。

伪类的操作对象是「文档树中已有的元素」，而伪元素则创建了一个「文档树之外的元素」。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

二、伪元素是使用单冒号还是双冒号？

按 CSS3 规范，

伪元素使用双冒号（::）表示，伪类使用单冒号（:）表示。

如果不按规范行事，并需要兼容 IE8 以下浏览器，

无论是伪类，还是伪元素，都使用单冒号（:）表示。

但是，经过各大浏览器厂商们的加班加点（可能是为了兼容性考虑），

除了少部分伪元素（比如 ::backdrop）必须使用双冒号之外，大部分伪元素都支持单冒号和双冒号的写法。

对于伪元素是使用单冒号还是双冒号的问题，W3C 标准中的描述如下：

Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { ... }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

综上所述：除了必须要双冒号的伪元素之外，为了向后兼容，建议伪元素也使用单冒号的写法。

三、常见的伪元素、伪类

伪类：

伪元素：