CSS 選擇器可以根據其他元素的狀態來定位元素嗎？

如何使用CSS 根據其他元素的狀態選擇元素

簡介

對特定元素一直是CSS 的一個基本面向。但是，當我們需要根據頁面中其他元素的狀態來設定元素樣式時，就會出現複雜性。本文探討了目前 CSS 選擇器的局限性，並介紹了即將推出的標準中的潛在解決方案。

目前 CSS 選擇器的限制

CSS 選擇器在選擇元素方面有一些限制基於他人的狀態。首先，它們無法使用父選擇器或前同級選擇器直接存取元素的狀態。其次，它們只能將單一元素定位為選擇器的主題，從而阻止我們根據條件將樣式套用到多個元素。

範例：根據懸停狀態定位元素

假設一個頁面上有多個部分。每個部分都包含一個帶有表示其狀態的「完成」資料屬性的 div。每當具有「finished」屬性的 div 懸停時，我們希望為下一節中的閃爍和旋轉元素添加彩色邊框。一個簡單的 CSS 選擇器是：

section:hover + section .blink,
section:hover + section .spin {
  border: 1px solid red;
}

但是，這不起作用，因為 CSS 沒有父選擇器來定位第一部分中的 div。

潛在的解決方案：Selectors 4 和:has()

即將推出的Selectors 4 草案引入了偽類稱為:has() 解決了這個問題。 :has() 讓我們可以選擇具有特定後代的元素。它需要一個與使用它的元素的後代相符的相對選擇器參數。

使用 :has() 解決上述問題的解決方案是：

section:has(div[data-status~=finished]) + section div:matches(.blink, .spin) {
  border: 1px solid red;
}

這裡，： has() 確保選擇器僅定位包含狀態為「完成」的 div 的部分。它還將子組合器與 :matches() 結合起來，以在後續部分中針對閃爍和旋轉元素。

結論

雖然目前的CSS 選擇器在選擇方面存在限制元素基於其他元素的狀態，Selectors 4 中即將推出的:has() 偽類提供了一個潛在的解決方案。它增強了選擇器語法，允許更靈活和有條件地定位元素。

以上是CSS 選擇器可以根據其他元素的狀態來定位元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！