基于样式表中的顺序的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，但我认为这与它有关。如果我错了，请有人纠正我。