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 | selector::pseudo-element-1 |
- 多重伪元素与伪元素嵌套目前正逐步进行。
整理
伪元素 | 功能 | 分类 |
---|---|---|
::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结构的情况下使用,将会为设计某些样式省下不少时间。
参考: