如果孩子存在[重复]

Question

我正在尝试使一些 CSS 尽可能动态，但接下来我遇到了一些问题：

假设到目前为止我有以下 html 和 css：

nav.blended {
  color: red;
}
nav.blended + .optional-stuff {
  color: green;
}

<nav class="blended">
  <div class="substuff">
    should be green
  </div>
  <div class="optional-stuff">
    should be green
  </div>
</nav>

<nav class="blended">
  <div class="substuff">
    should be red
  </div>
</nav>

但现在它总是保持红色。

如果需要，请编写代码：http://codepen.io/cskiwi/pen/GoRqPL?editors=110

Answer 1

.optional-stuff 不是nav.blended 的兄弟姐妹。

nav.blended {
  color: red;
}
nav.blended .substuff + .optional-stuff {
  color: green;
}

<nav class="blended">
  <div class="substuff">
    should be green
  </div>
  <div class="optional-stuff">
    should be green
  </div>
</nav>

<nav class="blended">
  <div class="substuff">
    should be red
  </div>
</nav>