如何根据 CSS 中特定子元素的存在来设置父元素的样式？

如果父元素有 CSS 子元素，则将样式应用于父元素

在 CSS 中，可以根据子元素的存在来设置父元素的样式使用 has() 选择器实现。

要在父级包含类为“sub”的子级时将样式应用于父级，请使用以下 CSS规则：

ul li:has(ul.sub) {
  /* Parent styles */
}

例如，如果您有以下 HTML：

<ul class="main">
  <li>Parent 1</li>
  <li>Parent 2</li>
  <li>Parent 3 with Child
    <ul class="sub">
      <li>Child of Parent 3</li>
    </ul>
  </li>
  <li>Parent 4</li>
</ul>

以及以下 CSS：

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

输出将显示“Parent 3 with Child”为浅蓝色，表示父级 (li) 有一个类别为“sub”的子级。

请注意问题的建议答案中提到的 $ 选择器尚未在 CSS4 中标准化。相反，has() 选择器是实现此功能的受支持方法。

以上是如何根据 CSS 中特定子元素的存在来设置父元素的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！