如果孩子存在

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>

但現在它始終保持紅色。

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>