CSS 特异性/优先级基于样式表中的顺序？

Question

我简要浏览了 CSS3 选择器规范，但无法找到任何方法来解决这个问题。此外，当您移动 CSS 声明时，我并没有预料到结果会发生变化，但事实确实如此。任何帮助都会很棒。

div.green_colour div.has_colour{
  background-color: green;
}
div.red_colour div.has_colour{
  background-color: red;
}

<div class="red_colour">
  <div class="green_colour">
    <div class="has_colour">
      I would like this to be green
    </div>
  </div>
</div>
<div class="green_colour">
  <div class="red_colour">
    <div class="has_colour">
      I would like this to be red
    </div>
  </div>
</div>

Answer 1

您可以使用 E >; F 子选择器作为您问题的解决方案，如下所示：

div.green_colour > div.has_colour{
  background-color: green;
}
div.red_colour > div.has_colour{
  background-color: red;
}

根据此图表 http:// /www.quirksmode.org/css/contents.html 它与所有主要浏览器和 IE 7+ 兼容

。如果您有兴趣，还有其他方法可以实现上述解决方案（例如通过 javascript）。

-- 编辑：

我不能 100% 确定您的解决方案不起作用的原因是否是由于浏览器从右到左而不是从左到右解析 CSS，但我认为这与此有关。如果我错了，请有人纠正我。