html - CSS 寻找一个不是 child 的选择器

Question

在下面的示例中，我有 2 个 div，我想弄清楚的是当 .one 为 .active 时如何使 .two 变为绿色。是否可以？ 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>

Answer 1

您可以通过在 css 中专门引用指令来做到这一点

div {
  position: relative;
  height: 100px;
  width: 300px;
}
.one {
  background: red;
}
.two {
  background: blue;
}
directive-one:active ~ directive-two > .two {
  background-color: green;
}

<directive-one>
  <div class="one active">
    First block
  </div>
</directive-one>
<directive-two>
  <div class="two">
    Second block
  </div>
</directive-two>

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

div {
  position: relative;
  height: 100px;
  width: 300px;
}
.one {
  background: red;
}
.two {
  background: blue;
}
.one:active ~ .two {
  background-color: green;
}

<div class="one active">
  First block
</div>

<div class="two">
  Second block
</div>

否则，我认为不可能访问不是兄弟或 child 的 div，<div> 就是这种情况。在<directive-one>里面试图访问另一个 <div>在另一个里面 <directive-two>