今天在微博上看到一些人在讨论: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 国际许可协议进行许可,转载时请注明原文链接,文章内图片请保留全部内容。