Question

我有一个包含两个孩子的div（父）。如果第二个DIV被隐藏，我想改变第一个DIV的颜色。

<div class="parent">
  <div class="col-lg-6" style="display: block;">
     11111111
  </div>
  <div id="xyz" class="col-lg-6" style="display: none;">
     222222
  </div>
</div>

我尝试过类似的事情：

.parent div:first-child:not(#xyz[hidden]) {
  background: #00ff00;
}

但它不起作用。那么，在CSS3中是否可能？

Answer 1

不幸的是，您当前的HTML结构使得无法使用原始CSS定位第一个<div>。

但是，如果您交换这两个元素，那么您可以根据#xyz的可见性来定位可见div：

#xyz[style*='display: none'] ~ div {
  background: #00ff00;
}

<div class="parent">
  <div id="xyz" class="col-lg-6" style="display: none;">
    222222
  </div>
  <div class="col-lg-6" style="display: block;">
    11111111
  </div>
</div>

~选择器定位<div>没有#xyz style的所有同级display: none元素。不幸的是，虽然~选择了兄弟姐妹，但兄弟姐妹必须在目标div之后。

不幸的是，这不是另一种方式：

div ~ #xyz[style*='display: none'] { background: #00ff00; }

<div class="parent"> <div class="col-lg-6" style="display: block;"> 11111111 </div> <div id="xyz" class="col-lg-6" style="display: none;"> 222222 </div> </div>

如果你使用JavaScript，你可以坚持使用当前的HTML结构：

if (document.getElementById('xyz').style.display = 'none') { document.getElementsByClassName('parent')[0].childNodes[1].style.background = '#00ff00'; }

<div class="parent"> <div class="col-lg-6" style="display: block;"> 11111111 </div> <div id="xyz" class="col-lg-6" style="display: none;"> 222222 </div> </div> <br /><br /> <div class="parent"> <div class="col-lg-6" style="display: block;"> 11111111 </div> <div id="xyz" class="col-lg-6" style="display: block;"> 222222 </div> </div>

希望这有帮助！：）

如果其他元素隐藏在CSS中，则为元素设置样式

1 个答案: