CSS伪元素整理小结

CSS伪元素整理小结

介绍

CSS中有一个特性允许我们添加额外元素而不影响文档本身,即实际上文档中没有生成这些元素,但在表面上可见,这就是伪元素。伪元素是对元素中的特定内容进行操作。实际上,设计伪元素的目的就是选取某些内容第一个字母(一行)、前面(后面)或是占位符等普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以称作伪元素。伪元素在CSS1中就已经存在,CSS2和3中也有所增加,目前[CSS-PSEUDO-4] (Level 4)中也有部分处于试验阶段,表格中已用“*”标记。

语法

起初伪元素的语法是使用一个冒号“:”,但是随着web的发展,在CSS3中伪元素使用两个冒号“::”,以便将它与伪类区分开(如:hover,:active等)。然而,使用一个冒号还是两个冒号,浏览器都能识别它们。但是IE8只支持一个冒号的格式,建议使用两个冒号::与伪类区分。

使用

  • 基本用法
1
selector::pseudo-element {property:value;}
  • 结合CSS类
1
selector.class::pseudo-element {property:value;}
  • 结合CSS伪类
1
selector.class:pseudo-class::pseudo-element {property:value;}
  • 结合多个伪元素
1
2
selector::pseudo-element-1 
selector::pseudo-element-2
  • 多重伪元素与伪元素嵌套目前正逐步进行。

整理

伪元素 功能 分类
::first-letter 向文本的第一个字母添加特殊样式 Typographic
::first-line 向文本的首行添加特殊样式 Typographic
::before 在元素之前添加内容 Tree-Abiding
::after 在元素之后添加内容 Tree-Abiding
::placeholder* 选择一个表单元素的占位文本,它允许开发者和设计师自定义占位文本的样式。 Tree-Abiding
::marker* 选择列表的前置标记,一般包含着重符号或数字,任何设置 display: list-item属性的元素或伪元素都能适用 Tree-Abiding
::selection(::inactive-selection) 设置对象被选择时的样式, 应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分) Highlight
::grammar-error* 应用于浏览器标识为语法错误的文本段 Highlight
::spelling-erro* 表示浏览器标记为不正确拼写的文本段 Highlight
::cue 匹配所选元素中的WebVTT提示,可用于在VTT轨道的媒体中使用字幕和其他线索 \
::backdrop 在任何处于全屏模式的元素下的即刻渲染的盒子 \

Tips

尽管有这么多个伪元素(相比伪类已经不多了),但是常用的是前四个,并且后面部分浏览器支持度很差。最最常用的是 “::before” 和 “::after”。

“::first-line” 与 “::first-letter”只能用于块级元素。

当宿主元素没有内容时”::before” 与 “::after”仍会正常工作,为inline内联元素,可通过display:block设置为block块元素。

content属性是伪元素必需的,若伪元素没有内容,需赋值为空格content:’’。

结论

CSS 伪元素用于将特殊的效果添加到某些选择器。伪元素十分好用,可以在不影响实际HTML结构的情况下使用,将会为设计某些样式省下不少时间。

参考:

CSS reference

W3school