今天在微博上看到一些人在讨论:before 和::before的区别，有些细节问题自己也有些模糊，工作之余翻了下W3C规范，总结如下：

1. W3C CSS 2.1 Selectors

对伪类和伪元素没有做出区分，都是使用一个冒号，详细请戳这里
比如
伪类:first-child，
伪元素:first-line

PS：在该规范中明确提到了a链接的几种伪类的书写顺序：

Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

2. CSS Selectors Level 3

该规范中为伪类和伪元素做了区分，伪类使用单冒号，伪元素开始使用双冒号。
比如
伪类:first-child
伪元素::first-line、::first-letter、::before、::after

CSS 3在CSS2.1的基础上增加了不少伪类:target、UI元素状态的伪类:checked等、结构性伪类:nth-child()等，具体可以看规范，详细请戳这里。

3. CSS Selectors Level 4草案

该草案中又增加了很多新的伪类，比如与input控制状态、值状态、值校验相关的伪类，树形结构的伪类，网格结构的伪类等。更多可以查看该草案。详细请戳这里。

4. CSS Pseudo-Elements Module Level 4——W3C First Public Working Draft, 15 January 2015

增加了一些伪元素，如： Selecting Highlighted Content: the ::selection, ::spelling-error, and ::grammar-error pseudo-elements， Placeholder Input: the ::placeholder pseudo-element，详细请戳这里。

5. 常见应用

伪类： 1) a链接样式 2) 隔行变色

伪元素：

1) 最常见的使用伪元素after清除浮动，
.fix{*zoom:1;}
.fix:after,.fix::after{display: block; content: “clear”; height: 0; clear: both; overflow: hidden; visibility: hidden;}

2) letter-spacing+first-letter实现按钮文字隐藏

3) 首行、首字母样式

6. 正确使用伪类和伪元素

关于这些伪类和为元素的使用，浏览器兼容性方面需要注意，新增的一些伪类在某些浏览器中不能有好的支持。可以使用Can I use这个网站查询。

转载申请

本作品采用知识共享署名 4.0 国际许可协议进行许可，转载时请注明原文链接，文章内图片请保留全部内容。