| 伪元素 | 作用 | 使用场景 | 示例 |
|---|---|---|---|
::after |
在元素内容之后插入内容 | 添加装饰性内容，如图标、边框 | p::after { content: "★"; } |
::before |
在元素内容之前插入内容 | 添加装饰性内容，如图标、边框 | p::before { content: "★"; } |
::first-letter |
选择第一个字母 | 首字下沉，字体样式变化 | p::first-letter { font-size: 200%; } |
::first-line |
选择第一行文本 | 改变段落的第一行文本样式 | p::first-line { color: blue; } |
::selection |
定制用户选中文本的样式 | 更改选中文本的颜色和背景 | p::selection { color: white; background: black; } |
::placeholder |
定制输入字段的占位符文本样式 | 改变输入框占位符的样式 | input::placeholder { color: grey; } |
::marker |
定制列表项标记的样式 | 改变列表项目符号的样式 | li::marker { color: red; } |
::backdrop |
为全屏元素提供背景 | 用于模态对话框背后的遮罩效果 | dialog::backdrop { background: rgba(0, 0, 0, 0.5); } |
::slotted() |
选择Web组件插槽中的元素 | 定制Web组件插槽内容的样式 | ::slotted(span) { font-weight: bold; } |
::part() |
选择Web组件的一部分 | 定制Web组件某部分的样式 | ::part(button) { color: blue; } |
这些伪元素提供了对元素样式的更细致控制，可以在不改变HTML结构的情况下实现多样的视觉效果。
使用伪元素而不是真实元素的原因主要包括以下几点：
减少HTML复杂性：伪元素允许在不增加额外HTML标记的情况下添加样式或内容，使HTML结构保持简洁和清晰。这有助于维护文档的语义结构，使其更加可读和易于管理。 样式分离：伪元素允许将装饰性样式与HTML内容分离，这符合CSS的核心原则——内容与表现分离。这样可以更容易地更改样式而不影响HTML结构。 动态内容：伪元素可以用来动态添加内容（例如，通过content属性），这样的内容通常是纯粹的装饰性质或者不需要在HTML文档中显式表示。 性能优化：使用伪元素可以减少DOM的大小，从而提升页面的性能。较小的DOM意味着浏览器需要处理的元素更少，这可以加快页面渲染速度。 交互效果：伪元素经常用于创建复杂的悬停效果和其他交互式视觉效果，这样可以在不影响HTML结构的情况下提供更丰富的用户体验。 代码重用：通过使用伪元素，可以在多个地方重用相同的样式，无需重复编写相同的HTML结构。这有助于减少代码冗余，使代码更加干净和高效。