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