提升CSS技巧：:is(), :where(), 和:has()僞元素的運用

:is()、:where() 和 :has() 僞元素是 CSS 中用于樣式化元素的非常強大的工具。它們是在 CSS 選擇器 Level 4 規範中引入的。它們允許我們将樣式應用于符合特定條件的任何元素，例如元素的類型、元素的位置和元素的後代。

:is()

:is() 僞類可以用于基于選擇器的組合來定位元素。它将一系列選擇器作為其參數，并在元素比對任何選擇器時傳回 true。

例如，如果你想要針對所有類名為 isPink 或 isPretty 的元素進行定位，可以使用:is()僞類。

HTML/CSS

div:is(.isPink, .isPretty) {
  color: pink;
}

<div class="isPink">
  <p>
    Pink
  </p>
</div>

<div class="isPretty">
  <p>
    Pretty
  </p>
</div>

<div>
  <span>
    Not Pretty
  </span>
</div>
           

在浏覽器中渲染時會看起來像這樣：

2. :where()

:where() 僞類可以根據條件來定位元素。它以條件作為參數，并在元素比對條件時傳回 true。

例如，如果你想要定位所有類名以 bold 開頭的元素，可以使用 :where()僞類來實作：

将以下僞類添加到上述CSS檔案中，将導緻任何具有以 bold 開頭的CSS類的子元素渲染為粗體。

div:where([class^="bold"]) {
  font-weight: bold;
}
           

HTML

<div class="isPink">
  <p>
    Pink
  </p>
</div>

<div  class="bold_text isPretty">
  <p>
    Pretty
  </p>
</div>

           

在浏覽器中渲染時會看起來像這樣：

僞元素 :is() 和 :where() 看起來在做同樣的事情。但是，僞元素 :is() 用于根據選擇器清單比對元素，而僞元素 :where() 則用于根據條件比對元素。

3. :has()

:has() 僞類可以用于基于後代元素來定位元素。它以選擇器作為參數，并在元素具有與選擇器比對的後代時傳回 true。

例如，如果你想要定位所有包含元素的元素，可以使用 :has() 僞類來實作。在這一步中，我們的 HTML 沒有任何變化。這個 CSS 的添加使得元素具有紫色的背景。

div:has(p) {
  background-color: purple !important;
}
           

這是我們網頁現在的樣子：

這些新的僞元素是任何CSS技能集中不可或缺的工具。經過一些練習，你将能夠自信地在自己的項目中使用它們。