10 CSS 伪元素

CSS 伪元素

伪元素 - CSS（层叠样式表） | MDN (opens new window)

伪元素：用于向某些选择器设置特殊效果。

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。下例中的 ::first-line 伪元素可改变段落首行文字的样式。

/* 每一个 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

注意：与伪元素比较，pseudo-classes(伪类选择器) 能够根据状态改变元素样式。

CSS伪元素与伪类区别

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

伪元素&伪类的特点：

• 伪元素和伪类都不会出现在源文档或者文档树中
• 伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面
• 伪元素名和伪类名都是大小写不敏感的
• 有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）

写法细节

:before/:after/:first-letter/:first-line : 前面可以是1个冒号也可以是双冒号 ::selection/::placeholder/::backdrop : 前面只能是双冒号

---

• :first-letter

:first-letter ：向文本的第一个字母添加特殊样式。

<p> hello first-letter </p>
<style>
    p:first-letter { color:red; font-size:30px; }
</style>

• :first-line

:first-line ：向文本的首行添加特殊样式。

<p> hello first-line </p>
<style>
    p:first-line { color:red; font-size:30px; }
</style>

• :before

:before ：在元素之前添加内容。

<p> hello before </p>
<style>
    p:before { content: 'before content' }
</style>

• :after

:after ：在元素之后添加内容。

<p> hello after </p>
<style>
    p:after { content: 'after content' }
</style>