如果孩子存在

Question

我试图让一些CSS尽可能地动态，但是对于下一个我有一些问题让它工作：

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

但现在它总是保持红色。

如果需要，

codepen：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>