如何根據 CSS 中子元素的存在來設定父元素的樣式？

使用CSS 根據子級的存在將樣式應用於父級

使用巢狀元素時，可能需要將樣式套用於父級基於是否包含子元素。 CSS 為此提供了有限的解決方案。

使用 ':has()' 選擇器

:has() 選擇器可用來選取包含特定的子元素。例如，要對包含ul.sub 子元素的父li 元素套用樣式：

ul li:has(ul.sub) {
    background-color: green;
}

限制

不幸的是，:has() 選擇器僅在CSS4 中受支持，並未被瀏覽器廣泛採用。

替代方案使用JavaScript

作為替代方案，您可以使用JavaScript 實現所需的效果：

$('ul li:has(ul.sub)').addClass('has_sub');

然後，在CSS 中為li.has_sub 類別新增樣式。

注意：

建議使用的原始答案中的刪除線部分$ 選擇器，這是 CSS4 提案，但目前任何瀏覽器都不支援。

以上是如何根據 CSS 中子元素的存在來設定父元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！