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

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 结构无法定位第一个 <div>使用原始 CSS。

但是，如果您交换这两个元素，那么您可以根据#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 .不幸的是，虽然 ~选择 siblings， sibling 必须在目标 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>

希望对您有所帮助! :)