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

Posted 2023-03-06

【中文标题】基于样式表中的顺序的CSS特异性/优先级？

【英文标题】：CSS specificity / priority based on order in style sheet?

【发布时间】：2011-11-15 00:11:12

【问题描述】：

我简要查看了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>

【问题讨论】：

仅供参考，这是 CSS3 选择器规范。 CSS3 是模块化的，所以有大约 51 个规范 — 参见 w3.org/Style/CSS/current-work。和 html5 一样，这不是一件大事。

我认为与移动时具有不同效果的样式有关的问题可能会在“CSS Cascading and Inheritance” spec 中解决。

太棒了。非常感谢保罗的链接。

【参考方案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，但我认为这与它有关。如果我错了，请有人纠正我。

【讨论】：

'Link-' 太棒了。非常感谢。不，实际上我试图避免使用 javascript，现在可以减少更多的负载。非常感谢。也感谢 QuirksMode 链接。这是w3 spec on child-combinators，虽然它没有提到强制执行优先级。

这与在绿色规则之后声明的红色规则有关。 has_colour 元素都匹配此规则，但由于红色元素是最后一个，因此应用了此规则。这也是为什么在 HTML 头部中首先导入 reset.css 文件而不是最后一个的原因。

@Benjamin 同意，但是 has_colour 与祖先 div.green_colour 声明为后代组合关系，浏览器不应该检查整个规则而不是它的一部分吗？因此我的从右到左解析理论。

是的，我不知道 '>' 或者顺序或 CSS 声明很重要。现在我愿意。实际上，我的实际问题（不是上面提到的问题）有一个细微的变化，因为我将 has_color div 嵌套在另一个内部，所以我的最终 css 是 div.green_colour > div > div.has_colour

正如本杰明所说，它与从右到左的解析无关；它与同样特定规则的声明顺序有关。此外，组合子不在特异性中发挥作用。