FED实验室 - 专注WEB端开发和用户体验

CSS伪类和伪元素的异同

CSS(3) 煦涵 3655℃ 0评论

今天在微博上看到一些人在讨论: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这个网站查询。

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (2)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽