如何使用 CSS 選擇器根據另一個元素的狀態選擇 DOM 元素？

根據CSS中的狀態關係選擇元素

問題：根據指定選擇DOM中的其他元素元素的狀態。

條件選擇：

• 使用簡單選擇器表示狀態（例如，div、[data-status~=finished]）。
• 使用組合器表達結構關係以形成複雜的選擇器.
• 使目標元素成為複合體的主題

當前限制：

不幸的是，使用目前的CSS選擇器無法滿足這些條件，因為：

• 缺少父選擇器（以目標物件的祖先為目標）元素）
• 缺少前一個同級選擇器（以目標元素之前的同級選擇器）

即將推出的功能：

即將推出的CSS Selectors 4標準引入了解決這些問題的功能限制：

• :matches() 偽類： 將多個複合選擇器分組。
• :has() 偽類：選擇包含與a 相符的子元素的元素

解決範例問題：

使用:has() 和:matches()，我們可以解決CSS 選擇器 4中的範例問題：

section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin) {
  /* styles for targeted elements */
}

替代方法JavaScript:

雖然並非所有瀏覽器都支援這些功能，但您目前可以使用JavaScript 使用:has( ):

$('section:has(> div[data-status~=finished]) + section > div').filter('.blink, .spin').css('color', 'red');

以上是如何使用 CSS 選擇器根據另一個元素的狀態選擇 DOM 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！