CSS查找不是孩子的选择器

时间:2016-10-03 03:48:13

标签: html css

在下面的示例中,我有2个div,我想弄清楚当.two.one时如何使.active变为绿色。可能吗? jsFiddle

div {
  position: relative;
  height: 100px;
  width: 300px;
}
.one {
  background: red;
}
.two {
  background: blue;
}
.one.active ~ .two {
  background: green;
}
<directive-one>
  <div class="one active">
    First block
  </div>
</directive-one>
<directive-two>
  <div class="two">
    Second block
  </div>
</directive-two>

2 个答案:

答案 0 :(得分:3)

您可以这样做,特别是在css

中引用指令

&#13;
&#13;
div {
  position: relative;
  height: 100px;
  width: 300px;
}
.one {
  background: red;
}
.two {
  background: blue;
}
directive-one:active ~ directive-two > .two {
  background-color: green;
}
&#13;
<directive-one>
  <div class="one active">
    First block
  </div>
</directive-one>
<directive-two>
  <div class="two">
    Second block
  </div>
</directive-two>
&#13;
&#13;
&#13;

您也可以删除指令,以便可以访问div

&#13;
&#13;
div {
  position: relative;
  height: 100px;
  width: 300px;
}
.one {
  background: red;
}
.two {
  background: blue;
}
.one:active ~ .two {
  background-color: green;
}
&#13;
<div class="one active">
  First block
</div>

<div class="two">
  Second block
</div>
&#13;
&#13;
&#13;

否则,我不相信它可以访问不是兄弟或孩子的div,<div>内的<directive-one>试图访问另一个<div> <directive-two>

答案 1 :(得分:1)

如果您使用directive-one标记active,则可以使用此css:

directive-one.active ~ directive-two > .two {
  background: green;
}

我不认为有可能深入了解前面的&#39;虽然元素,但不完全确定。