Question

我们说我的结构很简单：

<div id="a"></div>
<div id="b"></div>

如果#b有课程.test，我想设置#a { display: none; }。是否有任何css技巧来实现这个？我们可以假设他们是他们父母的唯一孩子。

Answer 1

抱歉，没有办法选择以前的纯兄弟兄弟。

如果您要使用flexbox布局，可以重新排列两个元素的视觉顺序，然后使用相邻的兄弟选择器选择最先视觉的项目。

例如：

<style>
  #a { order: 0; }
  #b { order: -1; }
  #a + #b { color: red; }
</style>
<div style='display: flex; flex-direction: column;'>
  <div id='a'>Hi</div>
  <div id='b'>Bye</div>
  <div>Three</div>
</div>

http://jsfiddle.net/ag266f52/1/

Answer 2

道歉漫长的一天，并没有正确阅读。

如果父母中只有2个项目可以使用：not（）

e.g。

html

<div class="blue">
  <div id="a">hi</div>
  <div id="b" class="test">his</div>
</div

CSS

.blue > :not(.test) {
    color: red;    
 }

CSS匹配前身

2 个答案: