纯 CSS 兄弟选择器

问题描述

<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>

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

解决方法

你能做的最好的事情是用 :empty 伪类隐藏黄色部分，但是，作为 we don't have a parent selector，你将不得不为红色部分寻找 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>

,

如果你想从 Jquery 做，那么应用这个：-

if($("#b2-Column1 > div").text() != ''){
    console.log('Not Emtpy');
}
else{
    console.log('Empty');
    $("#b2-Column1 > div,#b2-Column1").hide();
}