:where()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.
:where() CSS 伪类函数接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。
/* Selects any paragraph inside a header, main or footer element that is being hovered */ :where(header, main, footer) p:hover { color: red; cursor: pointer; } /* The above is equivalent to the following */ header p:hover, main p:hover, footer p:hover { color: red; cursor: pointer; } :where() 和 :is() 的不同之处在于，:where() 的优先级总是为 0，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。
语法
:where(<complex-selector-list>) { /* ... */ } 可容错选择器解析
规范将 :is() 和 :where() 定义为接受一个可容错选择器列表。
在 CSS 中使用选择器列表时，如果任何选择器无效，则整个列表被视为无效。当使用 :is() 或 :where() 而不是整个选择器列表时，如果某个选择器无法解析，则被视为无效，不正确或不受支持的选择器将被忽略，其他选择器将被使用。
:is(:valid, :unsupported) { /* … */ } 即使在不支持 :unsupported 的浏览器中，仍将正确解析 :valid，而：
:valid, :unsupported { /* … */ } 在不支持 :unsupported 浏览器中即使它们支持 :valid，仍将忽略。
示例
比较 :where() 和 :is()
该示例展示了 :where() 是如何起作用的，并且也阐述了 :where() 和 :is() 的区别。
跟随以下 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://developer.mozilla.org">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://developer.mozilla.org">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()，方式如下：
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; } 然而，我们以后想使用一个简单选择器覆盖页脚的链接应该怎么办？
footer a { color: blue; } 这个红色的链接不起作用，因为 :is() 中的选择器会计入整体选择器的优先级，并且类选择器的优先级高于元素选择器。
然而，:where() 中的选择器的优先级是 0，所以橘色的页脚链接将被我们的简单选择器覆盖。
备注： 你也可以在 GitHub 上找到这个示例；参见 is-where。
规范
| Specification |
|---|
| Selectors Level 4 # zero-matches |