CSS - :where()伪类

CSS 伪类函数:where()接受一个选择器列表作为输入，并选择与该列表中任何一个选择器匹配的每个元素。

语法

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

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>

打印页面