CSS 伪元素 - 绿叶网

CSS 伪元素是什么？

在 CSS 中，伪元素用于选择元素的 “特定部分” 并定义其样式，它们主要用于：

设置元素的第一个字母或第一行的样式。
在元素的内容之前或之后插入内容。
选择元素的一部分并设置其样式。

使用伪元素，可以使得我们为元素的特定部分应用样式，而无需在 HTML 中添加额外的元素。其中，所有伪元素都是以 “双冒号（::）” 开头的。

需要注意的是，CSS 伪元素与 CSS 伪类是两个不同的东西，小伙伴们要严格对比理解一下。

语法：

selector::pseudo-element {
    ……
}

说明：

selector 是用于选取需要添加样式的元素，pseudo-element 表示选取元素的特定部分。在 CSS 中，常用的伪元素有 5 个，如下表所示。

CSS 伪元素
伪元素	说明
::first-letter	选择元素的第一个字母
::first-line	选择元素的第一行
::selection	用于选择用户选择的元素部分
::before	用于在元素内部的内容 “之前” 插入内容
::after	用于在元素内部的内容 “之后” 插入内容

在实际开发中，可能小伙伴们会看到很多老代码写的是单冒号（比如 :before），这其实是 CSS2 的写法。虽然现代浏览器两者都支持，但为了区分伪类和伪元素，CSS3 规范推荐伪类使用单冒号（:），而伪元素使用双冒号（::）。

提示: CSS 伪元素可以看成是给 HTML 元素添加的 “虚拟” 小部件，而不需要使用额外的 HTML 元素。

CSS 伪元素的使用

CSS 伪元素提供了一种强大的方式来精确地控制元素样式的各个部分。接下来，我们通过几个简单的例子来讲解 CSS 伪元素是如何使用的。

示例 1：使用 ::before 和 ::after 伪元素

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div::before {
            content: "❑";
            color: red;
        }
        div::after {
            content: "⯎";
            color: blue;
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

CSS 使用 ::before 和 ::after 伪元素

分析：

在这个例子中，我们使用了 ::before 和 ::after 伪元素，分别在 div 元素的内容之前和之后插入了新的内容，并定义了插入内容的样式。

可能有小伙伴会问：“使用伪元素有什么意义呢？我使用下面这种方式不也一样可以实现吗？”

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div > span:first-child {
            color: red;
        }
        div > span:last-child {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <span>❑</span>
        绿叶网
        <span>⯎</span>
    </div>
</body>
</html>

确实如此，这两种方式都是可以实现相同的效果。但可以明显看出，如果不使用伪元素，则需要在 HTML 中使用更多元素才能实现。

在实际开发中，很多时候我们并不希望使用多余的 HTML 元素来在元素的 “前面” 或 “后面” 实现一些修饰效果（比如添加图标等），此时可以考虑使用伪元素来实现。

示例 2：使用 ::first-letter 伪元素

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p::first-letter {
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <p>绿叶网 - 为好教程，全力以赴</p>
</body>
</html>

页面效果如下图所示。

CSS 使用 ::first-letter 伪元素

分析：

p::first-letter 表示选取 p 元素中的首个字母（字符）。

示例 3：使用 ::selection 伪元素

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p::selection {
            background-color: orange;
        }
    </style>
</head>
<body>
    <p>绿叶网 - 为好教程，全力以赴</p>
</body>
</html>

页面效果如下图所示。

CSS 定义 ::selection 伪元素 1

分析：

p::selection {
    background-color: orange;
}

上面代码表示选取 p 元素中用户选中的文本，并定义了选中文本背景颜色为橘色（orange）。当我们使用鼠标选中 p 元素中的文本时，可以看到文本背景颜色变为橘色了，如下图所示。

CSS 定义 ::selection 伪元素 2

CSS 伪元素的优缺点

对于 CSS 伪元素来说，它具有以下优点。

无需修改 HTML：使用伪元素可以在不修改 HTML 结构的情况下，为特定元素的部分添加样式或内容。
提高灵活性：伪元素提供了更大的灵活性，允许开发者更精确地控制元素的外观。
实现特殊效果：伪元素可以用于实现一些特殊效果，例如首字放大、插入装饰性内容等。

同时，CSS 伪元素依然存在部分缺点。

兼容性问题：虽然现代浏览器对伪元素的支持度已经很高，但在一些旧版本的浏览器中可能存在兼容性问题。当然了，这个已经可以忽略不计了。
增加复杂性：过度使用伪元素可能会使 CSS 代码变得复杂，降低可读性和维护性。