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

是否可以为元素定义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功能。

据我所知，基于子元素设置父元素的样式不是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;
}

这是jQuery“ has”选择器的文档。

基本上没有 从理论上讲，这将是您追求的目标：

div.a < div { border: solid 3px red; }

不幸的是它不存在。

有一些类似“为什么不去”的文章。Shaun Inman充实的一口很好：

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors

在@kp的答案之上：

我正在处理这个问题，在我的情况下，我必须显示一个子元素并相应地校正父对象的高度（由于某些原因，我没有时间进行调试，因此自动调整大小在引导标头中不起作用） 。

但是，我认为不用动态地向父级添加CSS类，而是使用CSS选择性地显示子级，而不是使用JavaScript修改父级。这将保持逻辑中的决定，而不是基于CSS状态。

tl; dr; 将aand b样式应用于父项<div>，而不是子项（当然，并不是每个人都可以做到这一点。即，由Angular组件自行决定）。

<style>
  .parent            { height: 50px; }
  .parent div        { display: none; }
  .with-children     { height: 100px; }
  .with-children div { display: block; }
</style>

<div class="parent">
  <div>child</div>
</div>

<script>
  // to show the children
  $('.parent').addClass('with-children');
</script>

在我的情况下，我必须更改包含用DataTables动态呈现的表的输入复选框的元素的单元格填充：

<td class="dt-center">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

在initComplete函数中实现以下行代码后，我能够产生正确的填充，从而固定了行的显示高度不会异常

 $('tbody td:has(input.a)').css('padding', '0px');

现在，您可以看到正确的样式已应用于父元素：

<td class=" dt-center" style="padding: 0px;">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

本质上，此答案是@KP答案的扩展，但是实施此方法的协作越多越好。总而言之，我希望这对其他人有所帮助，因为它有效！最后，非常感谢@KP带领我朝着正确的方向前进！