根据其子元素将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>&nbsp; .parent&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { height: 50px; }&nbsp; .parent div&nbsp; &nbsp; &nbsp; &nbsp; { display: none; }&nbsp; .with-children&nbsp; &nbsp; &nbsp;{ height: 100px; }&nbsp; .with-children div { display: block; }</style><div class="parent">&nbsp; <div>child</div></div><script>&nbsp; // to show the children&nbsp; $('.parent').addClass('with-children');</script>