CSS 伪元素学习笔记

什么是伪元素

伪元素是CSS中的一个概念，表示在一个元素之前、之后或某个位置上生成一个虚拟的元素，这个虚拟的元素可以被CSS样式所控制，但是不会在DOM结构中出现。

在CSS中，伪元素使用双冒号(::)进行表示，不过为了兼容性，在一些旧的浏览器中，也可以使用单冒号(:)来表示伪元素。

伪元素的用途

伪元素可以用来创建一些特殊效果，比如一些常见的用途有：

1. :before和:after伪元素用来创建一些装饰性的内容，比如在段落前后加上引号、图标等。
2. ::selection伪元素用来设置用户选中文本时的样式。
3. ::first-letter伪元素用来设置文章的首字母样式。
4. ::first-line伪元素用来设置文章的首行样式。

实例演示

下面是一些伪元素的实例演示：

:before和:after伪元素

这里使用:before和:after伪元素来为一个段落元素添加一对引号。

HTML代码：

htmlCopy Code
<p>这是一个段落。</p>

CSS代码：

cssCopy Code
p::before {
  content: '"';
}

p::after {
  content: '"';
}

渲染结果：

"这是一个段落。"

::selection伪元素

这里使用::selection伪元素来设置用户选中文本时的样式。

CSS代码：

cssCopy Code
::selection {
  background-color: yellow;
  color: black;
}

当用户选中文本时，被选中的文本会变成黄色背景、黑色文字。

::first-letter伪元素

这里使用::first-letter伪元素来设置文章的首字母为红色、加粗。

HTML代码：

htmlCopy Code
<p>这是一个段落。</p>

CSS代码：

cssCopy Code
p::first-letter {
  color: red;
  font-weight: bold;
}

渲染结果：

这是一个段落。

::first-line伪元素

这里使用::first-line伪元素来设置文章的首行为红色、下划线。

HTML代码：

htmlCopy Code
<p>这是一个段落，这是第二行。</p>

CSS代码：

cssCopy Code
p::first-line {
  color: red;
  text-decoration: underline;
}

渲染结果：

这是一个段落，这是第二行。