伪元素选择器：真实与虚伪只隔一个选择器

书接上文，上回书咱们讲到了一个特殊的选择器，叫做伪类选择器。这类选择器主要是用来设置 HTML 元素在某种状态下的样式。不是太好掌握，需要仔细地理解、消化，再加上自己的总结才行。

接下来，咱们来说一说最后一种选择器，也是一种用法比较特殊的选择器，叫做伪元素选择器。

什么是伪元素选择器

之所以叫做伪元素选择器，我觉得还是挺直观的。说明这种选择器可以模拟 HTML 元素的效果，但又不是真正的 HTML 元素呗。那是不是这样呢？咱们还得慢慢来看。

关于伪元素选择器有个挺有意思的事儿，就是在 CSS3 版本之前，伪元素选择器的语法结构和伪类选择器的语法结构是一致的。也就是说，伪元素选择器也是在普通选择器的后面添加对应关键字来完成特定的功能。比如像这种用法，看着和伪类选择器没什么区别，但是它是伪元素选择器：

p:first-line {
	color: red;
	font-size: 12px;
}

而到了 CSS3 版本之后，伪元素选择器的语法结构就把一个冒号（:）改成了两个冒号（::）。也就是说，上面这个示例在 CSS3 版本之后应该这样来写才对：

p::first-line {
	color: red;
	font-size: 12px;
}

之所以这样做，估计应该只是为了和伪类选择器区分开吧。反正这个事儿我也没去认真地查阅过具体的原因。

`::before` 和 `::after` 伪元素选择器

在伪元素选择器里面，::before 和 ::after 伪元素选择器应该是咱们使用的频率最高的了。::before 伪元素选择器的作用就是为定位到的 HTML 元素创建第一个子元素，::after 伪元素选择器的作用就是为定位到的 HTML 元素创建最后一个子元素。

是的！你没看错，这两个伪元素选择器的作用就是为某个 HTML 元素创建第一个子元素和最后一个子元素的。这时候你可能会有个疑问，就是我在写 HTML 元素时，某个 HTML 元素很可能已经有了第一个子元素和最后一个子元素了，那再用这两个伪元素选择器之后会怎么样？答案是这两个伪元素选择器依旧会创建一个新的第一个子元素和最后一个子元素，而原来的第一个子元素和最后一个子元素就不再是了。

不信的话，咱们来看个示例相信你就明白了：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>before和after伪元素选择器</title>
  <style>
    .firstChild {
      color: lightcoral;
    }

    .lastChild {
      color: lightseagreen;
    }
  </style>
</head>

<body>
  <p>
    <span class="firstChild">CSS 人家的全名叫 Cascading Style Sheets，</span>
    <span class="lastChild">CSS 算是 HTML 这妹子的专业化妆师了。</span>
  </p>
</body>

</html>

在这个示例里面，咱们可以看到为了能突出第一个子元素和最后一个子元素，我为它们都设置不同的字体颜色。这个 HTML 运行之后的效果是这样子的：

在这里插入图片描述

然后咱们为 <p> 元素分别设置 ::before 和 ::after 伪类选择器：

p::before {
    content: '这是第一个子元素';
    color: lightpink;
}

p::after {
    content: '这是最后一个子元素';
    color: lightpink;
}

再来看看这个 HTML 运行的效果会变成怎么样子：

在这里插入图片描述

从运行的效果上来看，咱们可以看到在这段文本的前面和后面分别增加了一些文本内容。而这些文本内容就是 ::before 和 ::after 伪元素选择器添加上去的。

咱们可以再来看看这个 HTML 在浏览器中运行之后生成的源代码是怎么样的：

在这里插入图片描述

咱们可以清晰地看到在 <p> 元素里面多了 ::before 和 ::after，而这两个刚好一个在第一个子元素的位置一个在最后一个子元素的位置。

内容生成

在上面的示例里面，咱们在 ::before 和 ::after 伪元素选择器中同时都使用了 content 属性来设置这两个伪元素要显示的文本内容。

content 这个 CSS 属性的作用就是向 ::before 和 ::after 伪元素选择器中插入内容。但是不是文本内容，这要看这个属性的值是怎么样的：

none：不会产生伪元素
text：表示文本内容
url：用来设置外部资源的路径，比如图片什么的

`::selection` 伪元素选择器

在伪元素选择器中还有一个比较好玩的，就是 ::selection，这个伪元素选择器可以定位到用户在 HTML 中选择的文本内容。不明白？给你看个示例相信你马上就明白是怎么回事儿了：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>selection伪元素选择器</title>
  <style>
    p::selection {
      color: gold;
      background-color: red;
    }
  </style>
</head>

<body>
  <p>CSS 人家的全名叫 Cascading Style Sheets，整了俩外国妞儿，不对，是外国妹子，刺激吧？！中文名叫层叠样式表。CSS 算是 HTML 这妹子的专业化妆师了，她主要的作用就是让 HTML 看起来更漂亮。</p>
</body>

</html>

这个示例就是设置了当用户选择一些文本内容的时候，这些文本内容的字体颜色会是金色的，背景颜色会是红色的。

在这里插入图片描述

好玩吧？可能你没太注意过选择文本内容的时候，默认的效果是怎么样的：

在这里插入图片描述

一对比，你就知道这个伪元素选择器有多好玩儿了吧？！当然了，这个伪元素选择器也不是所有的 CSS 样式属性都能有效的，能有效的也就这些 CSS 属性吧：

color 属性
background-color 属性
cursor 属性
caret-color 属性
outline 属性
text-decoration 属性
text-emphasis-color 属性
text-shadow 属性