根据其子元素将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

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

但是，我认为不用动态地向父级添加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>