:where()

基线 广泛可用

此功能已得到很好的确立，并且可在许多设备和浏览器版本上运行。它自以下时间起在所有浏览器中都可用 2021年1月.

:where() CSS 伪类 函数以选择器列表作为其参数，并选择任何可以通过该列表中某个选择器选择的元素。

:where() 和 :is() 之间的区别在于，:where() 的 特异性 始终为 0，而 :is() 则采用其参数中最特异的选择器的特异性。

试一试

语法

:where() 伪类需要一个 选择器列表，即一个或多个选择器的逗号分隔列表，作为其参数。该列表不得包含 伪元素，但允许使用任何其他简单、复合和复杂选择器。

css
:where(<complex-selector-list>) {
  /* ... */
}

宽容的选择器解析

规范将 :is() 和 :where() 定义为接受 宽容选择器列表。

在 CSS 中使用选择器列表时，如果任何选择器无效，则整个列表都被视为无效。使用 :is() 或 :where() 时，如果其中一个选择器无法解析，则不会将整个选择器列表视为无效，而是会忽略不正确或不受支持的选择器并使用其他选择器。

css
:where(:valid, :unsupported) {
  /* … */
}

即使在不支持 :unsupported 的浏览器中，仍然可以正确解析并匹配 :valid，而

css
:valid,
:unsupported {
  /* … */
}

即使支持 :valid，在不支持 :unsupported 的浏览器中也会被忽略。

示例

比较 :where() 和 :is()

此示例演示了 :where() 的工作原理，并说明了 :where() 和 :is() 之间的区别。

以以下 HTML 为例

html
<article>
  <h2>:is()-styled links</h2>
  <section class="is-styling">
    <p>
      Here is my main content. This
      <a href="https://mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="is-styling">
    <p>
      Here is my aside content. This
      <a href="https://mdn.org.cn">also contains a link</a>.
    </p>
  </aside>

  <footer class="is-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

<article>
  <h2>:where()-styled links</h2>
  <section class="where-styling">
    <p>
      Here is my main content. This
      <a href="https://mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="where-styling">
    <p>
      Here is my aside content. This
      <a href="https://mdn.org.cn">also contains a link</a>.
    </p>
  </aside>

  <footer class="where-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

在这个有点牵强的示例中，我们有两个文章，每个文章都包含一个部分、一个旁注和一个页脚。它们的区别在于用于标记子元素的类。

为了简化选择它们内部的链接，但仍然保持区别，我们可以使用 :is() 或 :where()，如下所示

css
html {
  font-family: sans-serif;
  font-size: 150%;
}

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}

但是，如果我们稍后想要使用简单选择器覆盖页脚中链接的颜色怎么办？

css
footer a {
  color: blue;
}

这对于红色链接不起作用，因为 :is() 内部的选择器会计入整体选择器的特异性，并且类选择器的特异性高于元素选择器。

但是，:where() 内部的选择器的特异性为 0，因此橙色页脚链接将被我们的简单选择器覆盖。

注意：您也可以在 GitHub 上找到此示例；请参阅 is-where。

规范

规范
选择器级别 4
# 零匹配

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅