如何根据 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中文网其他相关文章！