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>

列印頁面