如何使用 CSS 根据子元素内容设置父元素的样式？

使用 CSS 基于子内容的目标元素

您可能会遇到需要根据子元素将独特的 CSS 样式应用于父元素的情况它们包含。虽然传统的 CSS 选择器专注于定位特定元素，但有一种方法可以使用 :has() 选择器来实现条件样式。

:has() 的语法如下：

div:has(div.a) {
  border: solid 3px red;
}
div:has(div.b) {
  border: solid 3px blue;
}

使用此语法，您可以将样式应用于包含特定子元素的 div 元素。例如，上述规则将为包含类“a”的子元素的 div 元素添加红色边框，并为包含类“b”的子元素的 div 元素添加蓝色边框。

示例:

<style>
  div:has(div.a) {
    border: solid 3px red;
  }
  div:has(div.b) {
    border: solid 3px blue;
  }
</style>
<div>
  <div class="a"></div>
</div>

<div>
  <div class="b"></div>
</div>

此代码将生成两个 div 元素，一个具有红色边框，一个具有蓝色边框，对应于它们的子元素包含。

注意： :has() 选择器在现代浏览器中得到广泛支持，但可能无法在旧版浏览器中工作。

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