CSS 如何根據同級元素的屬性選擇性地定位元素？

CSS 如何根據另一個元素的狀態選擇元素

根據 DOM 中其他元素的狀態識別和定位元素可能具有挑戰性。由於組合器和選擇器語法的限制，CSS 選擇器提供的選項有限。雖然可以應用一些基本技術，包括父子關係和偽類的使用，但某些場景需要更高階的解決方案。

目前實現的限制

目前標準選擇器 3 缺乏父選擇器或前一個同級選擇器等基本功能。這些功能將大大擴展 CSS 建構和定位元素的能力。無法指定選擇器的主題也帶來了限制。

即將推出的 Selectors 4 的潛力

即將推出的 Selectors 4 標準旨在解決這些限制。 :has() 偽類別受 jQuery 功能的啟發，提供了靈活的解決方案。 :has() 允許根據父元素中是否存在其他元素來選擇元素。

解決問題

問題中提出的範例問題，其中需要基於另一個元素的資料狀態屬性來定位元素，可以使用選擇器中的:has( ) 來解決4:

section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin)

此選擇器透過使用:has() 選擇包含具有指定資料狀態的子div的部分，然後定位與.blink 或 .spin 類別。

以上是CSS 如何根據同級元素的屬性選擇性地定位元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！