如何使用 :not() 链接多个选择器

在深入研究 :not() 之前，让我们快速了解一下 CSS 伪类。在 CSS 中，您使用选择器来选择要设置样式的元素。例如，您可以选择所有 <li> 元素并为其应用 aquamarine 颜色

/* Select and style all list items */
li {
  color: aquamarine;
}

伪类是您添加到选择器的关键字。它们允许您根据除匹配类或 ID 之外的匹配条件来设置元素的样式。因此，通过使用伪类（例如 :required），您可以根据表单元素是否必填来定位该元素。伪类（例如 :first-child）允许您根据元素在文档树中的位置来选择元素。您可以查看 MDN Web 文档中关于 CSS 中所有伪类列表。

一个常用的伪类示例是 :visited，它允许您设置用户已访问的链接的样式。这可以是一种巧妙的方式，让用户知道他们已经点击过的链接。

/* Select and style visited links */
a:visited {
  color: lightgreen;
}

:not() 是一个否定伪类，它选择与指定选择器都不匹配的元素。因此，您可以使用 :not() 来设置被指定选择器排除的元素的样式。

让我们来看一个例子。假设您想选择并设置页面上所有 <code> 元素的样式，但当这些元素在节标题内时，您想排除它们。您可以通过使用 :not() 伪类来做到这一点

/* Style all code elements except those inside h2 elements */
code:not(h2 > code) {
  color: red;
}

如您所见，:not 关键字被添加到元素选择器（<code>），并且否定选择器（h2 > code）被作为参数传递。

选择器级别 3 规范只允许将单个“简单选择器”作为 :not() 的参数。因此，您只能像这样设置元素的样式

:not(.item__cost) {
  font-family: "Montserrat";
}

在此示例中，所有没有类 .item__cost 的元素都会使用 Montserrat 字体。

使用 选择器级别 4，您可以指定“复杂选择器”作为 :not() 的参数，并将多个复杂选择器传递到逗号分隔的“选择器列表”中。从 Chrome 88、Firefox 84 和 Safari 9 开始，浏览器版本支持此功能。现在您可以像这样使用 :not()

/* Compound selector */
input:not(:required) {
  color: #919191;
}

所有不是必填的 <input> 元素将为深灰色。您还可以传递一个逗号分隔的列表，如下所示

/* Compound selector */
input:not(:required, [type="button"]) {
  background-color: blue;
}

所有不是必填的且不是按钮的 <input> 元素将具有蓝色背景。

要了解有关简单选择器、复合选择器、复杂选择器和选择器列表之间差异的更多信息，请查看 MDN Web 文档中关于 CSS 选择器的 选择器结构 部分。

在 CSS 中，当您想要对多个元素应用相同的样式时，您通常使用逗号分隔的 选择器列表 来对选择器进行分组。如下所示

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: helvetica;
}

类似地，您可以在逗号分隔的选择器列表中对多个 :not() 声明进行分组，以仅对排除的匹配元素应用指定样式。结果是将样式应用于被 :not() 选择器排除的任何元素。

假设我们有一个表单，我们想只设置可编辑的文本字段的样式。在以下示例中的表单中，字段 Employed 是一个菜单选项字段，字段 Employment Date 的类型为 date，字段 Country 具有 readonly 属性。这些是我们想要从样式中排除的字段，我们也可以通过使用 :not() 伪类来定位它们。

这是上面表单的 HTML 代码，您可以在其中找到属性和类型

<form>
  <label for="name" class="name">Name:</label>
  <input type="text" id="name" name="name" value="Enter your name" />

  <label for="emp" class="emp">Employed:</label>
  <select name="emp" id="emp" disabled>
    <option selected>No</option>
    <option>Yes</option>
  </select>

  <label for="empDate">Employment Date:</label>
  <input type="date" name="empDate" id="empDate" />

  <label for="country">Country:</label>
  <input
    type="text"
    name="country"
    id="country"
    value="United States"
    readonly />

  <label for="resume">Resume:</label>
  <input type="file" name="resume" id="resume" />
</form>

可以使用 :not() 伪类实现所需的样式，如以下 CSS 代码所示。lightyellow 背景颜色将应用于所有没有disabled 属性或readonly 属性或类型 date 的 <input> 元素。结果是选择和设置字段 Name、Employed 和 Resume 的样式。请注意，即使字段 Employed 具有 disabled 属性，它也没有设置样式，因为它是一个 <select> 元素。

label {
  display: block;
  margin-top: 1em;
  font-weight: bold;
}

input:not([disabled], [readonly], [type="date"]) {
  background-color: lightyellow;
  color: red;
}

这就是 :not() 如何链接多个选择器。

总而言之，在 :not() 伪类中使用逗号分隔的选择器来链接多个选择器的声明。我希望您觉得这篇文章有所帮助。如果您有任何问题或反馈，请随时参与 关于这篇文章的 GitHub 讨论。您也可以在 MDN Web 文档的 Discord 服务器 中与我们打个招呼。下次见，祝您阅读和构建 Web 网页愉快！