:where

CSS 中的 :where() 伪选择器在功能上与 :is() 伪选择器 相同，它们都接受一个逗号分隔的选择器列表以匹配，不同的是 :is() 使用其中最 特定 的选择器作为整个部分的特定性，:where() 的特定性始终为零 (0)。

例如

main :where(h1, h2, h3) {
  color: orange;
}

匹配方式就像您这样写选择器

main h1, main h2, main h3 {
  color: orange;
}

… 除了上面的第一个例子中的特定性是 (0, 0, 0, 1) 用于单个元素选择器 (main)，并且不包含 :where() 部分中任何东西的特定性。而在第二个例子中，特定性是 (0, 0, 0, 2)，因为有两个元素选择器。

决定特定性处理

决定是否要使用 :is() 的特定性或 :where() 的零特定性是一个艰难的决定，尽管我可能会争辩说，总体上保持较低的特定性比处理具有较高特定性的元素更能减少麻烦。

想象一个经典的布局

<header class="header"></header>
<main class="main"></header>
<aside class="aside"></aside>
<footer class="footer"></footer>

如果我想选择标题和页脚中的链接，我可以…

:is(.header, .footer) a {
  color: red;
}

该选择器是 (0, 0, 1, 0)，这意味着如果我要编写

header a {
  color: orange;
}

该选择器特定性较低，为 (0, 0, 0, 2)，不会覆盖另一个选择器。但如果我写

:where(.header, .footer) a {
  color: red;
}

这仅仅是 (0, 0, 0, 1)，所以我的覆盖将会生效。

可能一个不太牵强的例子是通过 ID 选择一个标题，而不必诉诸于 ID 级别的特定性。

h3:where(#specific-header) {
  outline: 1px solid yellow;
}

在这里，我选择了一个带有特定 ID 的标题。ID 具有非常高的特定性 — (0, 1, 0, 0) — 这很难覆盖，但在这里，我设法只选择了那个标题，但没有使用任何超高特定性来做到这一点。

宽容的选择器

:where(x, y, z) 中逗号分隔列表中的每个选择器都是宽容的，因为如果它无效，它将被忽略。这很重要，因为它不会像无效选择器 通常那样 抹掉整个选择器。有关更多信息，请参阅它与 :is() 选择器如何工作，因为它是一样的。

:where(h1, totally:fake) {
  /* will still select h1 */
}

浏览器支持

IE	Edge	Firefox	Chrome	Safari	Opera
否	88	78	88	14	74

Android Chrome	Android Firefox	Android 浏览器	iOS Safari	Opera Mobile
全部	全部	91	14.4	否

更多信息

相关