CSS 伪类:where() 函数 接受选择器列表作为输入，并选择与该列表中的任何选择器匹配的每个元素。
语法
:where(<complex-selector-list>) {
/* css 声明*/
} CSS :where 示例
以下示例演示了 :where() 伪类的使用。
<html>
<head>
<style>
main :where(h1, h2, h3) {
color: rgb(102, 0, 255);
}
:where(h2) {
text-decoration-line: underline;
}
div {
border: 3px solid black;
}
</style>
</head>
<body>
<main>
<h1>Heading 1</h1>
<h3>Heading 3</h3>
<div>
<h2>Heading 2</h2>
<p>Paragraph under div</p>
</div>
</main>
</body>
</html> :where() 和 :is() 之间的区别
以下之间的区别: where() 和 :is() 在于其特定行为，如下所示:
| :where() | :is() |
|---|---|
| 这是一个CSS 选择器，允许您对选择器进行分组而不增加特异性。 | 它是一个 CSS 选择器，允许您对选择器进行分组，但与 :where() 不同，它继承了括号内最具体选择器的特异性 |
| 它充当一个容器，您可以在其中写入复杂的选择器，而不会影响这些选择器的特异性。 | 它仅在需要时用于增加特异性，同时保留各个选择器的特异性 |
| 例如， :where(div, p) { /* styles */ } 将 div 和 p 选择器分组，而不增加特异性。 | 例如， :is(div, p) { /* styles */ } 将采用 div 或 p 的特异性，以更具体的为准。 |
总之，:where() 保持特异性为 0，而 :is() 根据括号内最具体的选择器调整其特异性。
示例
此示例演示如何使用 :is() 进行特定样式设置。
:where() 可以用于添加附加样式，而不改变 :is() 设置的特异性或覆盖样式。
.special-box 元素的特定样式被保留，并且附加样式被使用 :where() 添加。
<html>
<head>
<style>
:is(.box, .special-box) {
background-color: lightgray;
color: black;
font-weight: bold;
}
:where(.box, .special-box) {
border: 2px solid black;
padding: 10px;
margin: 10px;
}
:is(.special-box) {
background-color: blue;
color: white;
}
:where(.special-box) {
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box A</div>
<div class="special-box">Special Box</div>
<div class="box">Box B</div>
</div>
</body>
</html> 选择器容错解析
CSS 中选择器容错解析的概念指的是 :is() 和 : where() 选择器处理选择器列表中的无效选择器。
在 CSS 中，如果选择器列表中的选择器无效，则整个列表都被视为无效，并且不应用与之关联的样式。
使用 :is() 和 :where()，列表中不正确或不受支持的选择器将被忽略，其余有效的选择器将被忽略。选择器仍然适用。换句话说，:is() 和 :where() 提供了一种宽容机制，其中各个无效选择器不会破坏整个选择器列表。
示例
在以下示例中:
:is() 和 :where() 选择器用于设置特定元素的样式。
特殊样式应用于 .content div 内具有 .special 类的框。
.container div 内的标头获得独特的样式，忽略无效的样式选择器。
.container 内的所有框都具有通用样式。
.container 内的 .footer 内的段落样式不同。
:where(.box.invalid-selector) 中的无效选择器不会破坏整个规则，展示了宽容的选择器解析。
<html>
<head>
<style>
:where(.content) :is(.box.special) {
background-color: yellow;
color: black;
font-weight: bold;
}
:where(.container) :where(.header, .invalid-selector) {
background-color: lightblue;
color: white;
}
:where(.container) :is(.box) {
border: 2px solid black;
margin: 10px;
padding: 10px;
}
:where(.container) :where(.footer) p {
font-style: italic;
color: gray;
}
:where(.container) :where(.box.invalid-selector) {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Main Heading</h1>
</div>
<div class="content">
<div class="box">Box 1</div>
<div class="box special">Special Box</div>
<div class="box">Box 3</div>
</div>
<div class="footer">
<p>Footer Content</p>
</div>
</div>
</body>
</html>