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

Question

我简要介绍了CSS3 Selectors spec，但找不到任何解决这个问题的方法。另外，当你移动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，但我认为它与它有关。如果我错了，请有人纠正我。