伪类选择器：可以预设未来某种状态

书接上文，上回书咱们讲到了 CSS 的群组选择器，这种选择器算是一种把咱们之前所有的选择器整合在一起来定位 HTML 元素的方式。而且到这为止，咱们已经把 CSS 的几类选择器都过了一遍。虽然可能你也只是有个印象而已，不过没有关系的，因为往后咱们接触到的每一块内容都要用到选择器。慢慢地，你也就会熟练起来啦！

那么接下来，咱们要说一个 CSS 选择器里面比较特殊的内容，至少我觉得比较特殊，就是伪类选择器。

什么是伪类选择器

为啥说它特殊的，原因其实也挺简单的，就是伪类选择器不算是一个独立的选择器。实际上，伪类选择器是需要配合之前咱们所掌握的所有选择器来一起使用的。而且，伪类选择器是用来表示某个 HTML 元素的某种状态的样式。

是不是有点懵？！其实，我第一次接触伪类选择器的时候，也有点懵。那怎么办呢？咱们还是从示例入手，先来看看它的具体用法，再回过头来说它的作用吧。

咱们先来说它的语法结构，伪类选择器的用法是在某个选择器的基础上，再添加一个冒号和具体的伪类名称。就像这个样子：

h2:hover {
	color: lightcoral;
}

这个示例里面的 :hover 就是伪类选择器。咱们可以看到在这个示例里面它是配合类型选择器来使用的。所以，伪类选择器的语法结构就应该是这个样子了：

选择器:伪类 {
	样式声明块
}

如果咱们为上面的示例补充 HTML 的话，那这个 HTML 运行之后的效果就应该是这个样子的：

在这里插入图片描述

之所以能看到上面这样的效果的原因，是因为 :hover 伪类选择器是在鼠标悬停在某个元素上时的样式。

伪类选择器的种类

相信通过上面的示例，你可以简单地了解一下伪类选择器的作用。具体的用法不是现在咱们的重点，因为 CSS 里面的伪类选择器的数量是相当的多。有多少呢？给你看张图：

在这里插入图片描述

这张图是由 MDN 网站提供的。

为了方便咱们的学习伪类选择器，咱们可以把上面这些伪类选择器分成 5 个种类，这样就可以一类一类的学习啦：

动态伪类选择器（《链接》那章学习）
目标伪类选择器（《链接》那章学习）
元素状态伪类选择器（《表单》那章学习）
结构伪类选择器（《表格》那章学习）
否定伪类选择器（现在马上就学）

上面这五种伪类选择器，你可能已经看到了，有 4 种咱们都是放到对应的章节里面来学习的。之所以这么做，并不是因为这些伪类选择器只能和这些 HTML 元素配合使用，而是因为和这些 HTML 元素配合学习会更清晰一些。

否定伪类选择器

既然五种里面有四种都是要放到后面的章节中进行学习，咱好歹也得留一个来入个门不是？！所以，咱们就用这个否定伪类选择器作为伪类选择器入门的吧。

咱们先来看看它的语法结构：

选择器1:not(选择器2) {
	样式声明块
}

关于这个语法结构，咱们得说一说：

选择器1：就是定位 HTML 元素用的
选择器2：是在选择器1定位的 HTML 元素除去匹配选择器2的元素

这个解释可能有一点点的绕。简单来说，否定伪类选择器就是来定位那些和“选择器2”不匹配的 HTML 元素。算了，咱们还是通过一个示例来看看吧：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>否定伪类选择器</title>
  <style>
    p:not(.decs) {
      color: lightcoral;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <p class="decs">CSS 人家的全名叫 Cascading Style Sheets，整了俩外国妞儿，不对，是外国妹子，刺激吧？！中文名叫层叠样式表。CSS 算是 HTML 这妹子的专业化妆师了，她主要的作用就是让
    HTML 看起来更漂亮。</p>
  <p>在没有 CSS 这妹子在 HTML 身边的话，HTML 在浏览器里面运行的样式就是浏览器自身提供的样式。说到这儿，就有个问题啦！在不同的浏览器中运行同一个 HTML 显示的样式会不会不一样呢？咱们就来试一试吧！</p>
</body>

</html>

这个示例 HTML 运行之后的效果是这样的：

在这里插入图片描述

在这个示例里面，咱们可以很清楚地看到，最终定位的是 <p> 元素里面 class 属性的值不是 decs 的。这就是否定伪类选择器的作用，不知道通过这样的示例你是否能明白呢？