CSS 伪类和伪元素

也是选择器的一种，被称为伪类和伪元素。这一类选择器的数量众多，通常用于很明确的目的。

伪类

什么是伪类

伪类是选择器的一种，它用于选择处于特定状态的元素。
比如当它们是这一类型的第一个元素时（:first-child），或者是当鼠标指针悬浮在元素上面的时候（:hover）。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

伪类是以开头为冒号的关键字：:first-child

简单伪类示例

让一篇文章中的第一段变大加粗，可为此段加上一个类，然后为那个类添加 CSS（不使用伪类）

<article>
  <p class="first">HTML_P1</p>
  <p>HTML_P2</p>
</article>

.first {
  font-weight: bold;
}

要是文档的头部又加上一段的话呢？我们会需要把class="first"这个类挪到新加的这段上。假如我们不加类，我们可以使用:first-child伪类选择器——这将一直选中文章中的第一个子元素，我们将不再需要编辑 HTML（使用伪类）

<article>
  <p>HTML_P1</p>
  <p>HTML_P2</p>
</article>

article p:first-child {
  font-weight: bold;
}

用户行为伪类

一些伪类只会在用户以某种方式和文档交互的时候应用。这些用户行为伪类，有时叫做动态伪类，表现得就像是一个类在用户和元素交互的时候加到了元素上一样。例：

:hover——在用户将指针挪到元素上的时候才会激活
:focus——在用户使用键盘控制，选定元素的时候激活。

<p><a href="">链接</a></p>

a:link,
a:visited {
  color: blue;
  font-weight: bold;
}
// 指针挪到元素上变红
a:hover {
  color: red;
}

伪元素

伪元素是啥

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::

注意：一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。

简单为元素示例

例如，如果你想选中一段的第一行，你可以把它用一个元素包起来，然后使用元素选择器；不过，如果包起来的单词/字符数目长于或者短于父元素的宽度，这样做会失败。由于我们一般不会知道一行能放下多少单词/字符——因为屏幕宽度或者字体大小改变的时候这也会变——通过改变 HTML 的方式来可预测地这么做是不可能的。

::first-line伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变，它也只会选中第一行。

<article>
  <p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段</p>
  <p>第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段</p>
</article>

article p {
  width: 50%
}
article p::first-line {
  font-size: 150%;
  font-weight: bold;
}

把伪类和伪元素组合起来

以上面的例子，如果只想让第一段的第一行加粗，你需要把:first-child和::first-line选择器放到一起。

<article>
  <p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段</p>
  <p>第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段</p>
</article>

article p {
  width: 50%
}
article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

特殊的::before 和::after

有一组特别的伪元素，它们和content属性一同使用，使用 CSS 将内容插入到你的文档中中。

<p class="box"> 内容 </p>

.box::before {
  content: "前";
}

.box::after {
  content: "后";
}

注意：从 CSS 插入文本字符串，我们并不会在 Web 浏览器上经常这么做，因为对于一些屏幕阅读器来说，文本是不可见的，而且对于未来别人的查找和编辑也不是很方便。
这些伪元素的更推荐的用法是插入一个图标，例如下面的示例加入的一个小箭头，作为一个视觉性的提示，而且我们并不希望屏幕阅读器读出它。

// 页面操作，并不会选中符号
.box::after {
  content: " ➥";
}

::before和::after伪元素与content属性的共同使用，在 CSS 中被叫做“生成内容”，而且你会见到这种技术被用于完成各种任务。无论什么时候你看到了这些选择器，都要看下content属性，以了解文档中添加了什么。

示例，用 CSS 生成一个箭头。

<p class="box"> 内容 </p>

.box {
	position: relative;
	background: yellow;
}
.box:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(213, 96, 151, 0);
	border-bottom-color: #d56097;
	border-width: 15px;
	margin-left: -15px;
}

参考

伪类

伪元素