根据其子元素将CSS样式应用于元素

Question

是否可以为元素定义CSS样式，仅在匹配的元素包含特定元素（作为直接子项）时才适用？

我认为最好用一个例子来解释。

注意 ：我正在尝试设置 父元素的样式 ，具体取决于其包含的子元素。

<style>
  /* note this is invalid syntax. I'm using the non-existing
   ":containing" pseudo-class to show what I want to achieve. */
  div:containing div.a { border: solid 3px red; }
  div:containing div.b { border: solid 3px blue; }
</style>

<!-- the following div should have a red border because
     if contains a div with class="a" -->
<div>
  <div class="a"></div>
</div>

<!-- the following div should have a blue border -->
<div>
  <div class="b"></div>
</div>

注意2 ：我知道我可以使用javascript来实现，但是我只是想知道是否可以使用一些（对我而言）未知的CSS功能。

Answer 1

据我所知，基于子元素设计父元素的样式不是CSS的可用功能。您可能需要为此编写脚本。

如果您可以做类似div[div.a]或div:containing[div.a]如您所说的事情，那就太好了，但这是不可能的。

您可能需要考虑使用jQuery。它的选择器可以很好地与“包含”类型一起使用。您可以根据其子级内容选择div，然后将CSS类全部应用于父级。

如果您使用jQuery，则类似的方法可能会起作用（未经测试但理论存在）：

$('div:has(div.a)').css('border', '1px solid red');

要么

$('div:has(div.a)').addClass('redBorder');

结合CSS类：

.redBorder
{
    border: 1px solid red;
}