css - 纯 CSS 同级选择器

Question

<style>
#b2-Column1 {
    background-color:red;
    min-height:120px;
}

#b2-Column1 > div {
    background-color:yellow;
    min-height:100px;
}

</style>

<div id="b2-Column1">
<div><!-- some comments here's --></div>
</div>

我该怎么办，如果黄色部分是空的，那么我想将红色和黄色设置为显示：无；

标签： csssiblings

Answer 1

你能做的最好的就是用:empty伪类隐藏黄色部分，但是，由于我们没有父选择器，你必须为红色部分寻找 JavaScript 解决方案。

.container {
  background-color: red;
  min-height: 120px;
  margin-top: 1em;
}

.child {
  background-color: yellow;
  min-height: 100px;
}

.child:empty {
  display: none;
}

<div class="container">
  <div class="child"><!-- some comments here's --></div>
</div>


<div class="container">
  <div class="child">
    <p></p>
  </div>
</div>