CSS - 伪类

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>