为何CSS嵌套兄弟组合器在示例中无法正确应用黄色样式？

你用的相邻兄弟选择器（+）规则理解错了，这个选择器的作用是：匹配紧跟在指定元素后面的同级元素。

看你的HTML结构：

<div class='splash yellow'>
  <span>Yellow</span>
</div>
<div class='splash green'>
  <span>Green</span>
</div>
<div class='splash red'>
  <span>Red</span>
</div>

再对应CSS里的规则：

• .splash + .red：匹配的是紧跟在.splash元素之后的.red元素——第三个div前面是带splash类的绿色div，符合条件，所以红色背景生效；
• .splash + .green：匹配的是紧跟在.splash元素之后的.green元素——第二个div前面是带splash类的黄色div，符合条件，所以绿色背景生效；
• .splash + .yellow：匹配的是紧跟在.splash元素之后的.yellow元素——但黄色div是第一个元素，前面没有任何带splash类的元素，根本匹配不到，所以黄色背景不生效。

如果要给同时拥有splash和对应颜色类的元素加背景色，应该把选择器改成类连写（匹配同时拥有多个类的元素），修正后的CSS如下：

.splash {
    margin: 15px;
}

.splash.yellow {
    background-color: yellow;
}
.splash.green {
    background-color: green;
}
.splash.red {
    background-color: red;
}

这样三个元素的背景色都会正常生效。

内容的提问来源于stack exchange，提问作者user2526037