11.3 CSS 伪元素(pseudo-elements)

用来创建文档树之外的抽象元素

什么是伪元素

让我们先看看W3的伪元素官方定义

伪元素用来创建HTML文档语言指定之外文档树的抽象层。比如HTML没有提供文档元素内容的首字母或第一行的访问机制。CSS伪元素允许作者引用这些除此之外无法访问的信息。伪元素还提供一种方法来引用不存在于文档中的内容。(比如,::before::after )。

一个伪元素由2个冒号(::)加上伪元素的名字所定义。

:: 标记是CSS2.1新规范中引入的,用来区分伪类(pseudo-classes)和伪元素(pseudo-elements)。但出于现有样式表兼容性原因,用户代理必须也能支持CSS1和CSS2中引入的单冒号伪元素标记(也就是说,:first-line, :first-letter, :before 和 :after)。但是CSS2.1及以后版本新引入的伪元素不支持这种兼容语法。

每个选择器中只能出现一个伪元素,并且只能出现在选择器主体的后面

注意:后续版本可能会允许每个选择器中出现多个伪元素。

从上面的定义,我们可以得知伪元素事实上创建了一个虚拟的元素,在这个虚拟元素上可以应用一般CSS规则乃至伪类选择器。伪元素并不选定(过滤)元素,实际上它们选定(过滤)内容(::first-line,::first-letter)或创建内容(::before,::after,然后包装到一个虚拟容器中,作者可以为此容器添加样式。

尽管理论上使用JavaScript也可以获取第一行文本或第一个字母,但这高度依赖于当前使用的字体家族、字体大小、元素宽度,浮动元素等各种因素,显得相当繁琐。而通过CSS伪元素我们可以方便获得。

伪元素的用途

例子1 - 使用伪元素给文字自动添加语言说明后缀

  • 本例使用伪类:lang来过滤lang属性为特定值(如en-us)的元素。
  • 使用伪元素::after来给元素(文本)自动添加语言说明后缀。

通过本例,可以对伪类和伪元素的不同作用有个直观的认识。

例子2 - 使用伪元素实现首行着色和段落投影

  • 本例使用伪类:lang来过滤lang属性为特定值(如en-us)的元素。
  • 使用伪元素::after来给元素(文本)自动添加语言说明后缀。

例子3 - 使用伪元素实现圆环图形

我们在border-radius使用章节演示过如何实现一个圆形和环形,在实现环形时使用了2个嵌套的DIV元素。那么使用伪元素可以节省一个DIV,内圆使用伪元素来替换。

伪元素默认是inline样式的,通过设置成绝对定位,可强制改变display为block,这样对其设置宽高才能生效。

  • 本例使用伪类:after来实现内圆。

更多使用伪元素实现的巧妙交互动效,可直接在我们的主站点进行搜索。

伪类和伪元素的区别

前面一节和本节内容分别详细讲述了伪类和伪元素的使用,我们应该已经大致理解了两者的异同点,这里再总结一下:

  • 两者都不存在于HTML文档树中,都是为了支持依靠文档树之外的信息来进行格式化。
  • 出于历史兼容性原因,一些在CSS2.1规范之前引入的伪元素使用和伪类一样的语法标记(单冒号:)。
  • 伪类本质上和类相同,是用来选择过滤HTML元素的。只不过伪类是按动态特征过滤,而不是名称、属性或内容。
  • 伪元素本质上和元素相同,是已有元素的某个部分或新创建的补充元素。伪元素上可以应用伪类选择器来过滤。
  • 伪类可以出现在选择器的任何地方,而伪元素只能添加在最后一个简单选择器之后。

W3规范相关章节参考阅读

我们把和伪类和伪元素相关的官方规范收集在这里,方便读者集中查询和参考。