css规则应用顺序

Question

这篇文章（尽管它是基于一个给我的工作带来麻烦的事实）更像是一个哲学问题，而不是一个真正的问题提交。

我偶然发现了下面这个令人费解的案例......

这不是一个真正的问题，因为我（认为我）了解这种现象，它是如何被统治的以及它所产生的影响。

我做了以下示例：http://jsfiddle.net/q7xAn/ 尽可能描述性。

在这种情况下，为什么（Ô上帝为什么）跨度有黄色背景？

我不知道哪个规则适用它，但更多的是：以哪个扭曲的名义（与我一直假设的相反），最后声明的规则是否适用于第一个声明的规则？

我的意思是“.red span”和“.yellow span”的复杂度相同。

• 长度相同
• 给定位置的每个项目都具有相同的权重/重要性

它们在 css 选择器自然顺序中是等价的。

那么在适用的问题上应该占主导地位的是哪个规则最接近样式项目。 在我的示例中，跨度应使用“.red span”（最接近规则）而不是“.yellow span”（这也是正确的，但被“.red span”“覆盖”）。

这种行为是否有任何“历史”、“政治”、“哲学”或任何其他原因？ 一些 DOCTYPES （可能是？）可能会迫使我关注的行为？ 我可以向 w3c 提交请求吗（为什么不呢？）？如何 ？ 任何信息、建议、不同观点都非常欢迎！

提前谢谢大家。

---

Edit note :

我讨厌引用自己的话，但在对 aymeric 的评论中，我想出了一个很好的方式来解释我的问题到底是关于什么的。

---

一般来说，困扰我的是，如果我有，假设有 7 种配色方案（每种彩虹色一个）。

还假设我是一个（比如说）10 人的团队的 CSS 制作者。

我希望他们（我的团队）能够嵌套颜色方案的块。

• 在一种情况下，红色方块可以容纳黄色和洋红色方块。
• 在另一种（有趣的）情况下，需要有 7 层嵌套（红色嵌套在橙色中，黄色嵌套在 ...）。

我现在无法预先知道需要使用哪种方式。

当前的 CSS 经验行为会迫使我每次在新的嵌套需求弹出时修改我的 css，并以令人讨厌的过度臃肿的规则告终。
就可维护性而言，这是一个暴行:'(

Answer 1

它被称为 css 的specificity。如果两个选择器与特定元素匹配并且它们具有相同的weight，则出现later 的选择器将应用于该元素。

阅读this了解更多信息。

您的选择器.red span 和.yellow span 的权重均为0,1,1（我提到的链接将详细解释如何计算权重），因此适用最后一条规则。

另请阅读来自 W3 的 this 文章，这将更好地解释事情。

希望所有这些都有意义:)

Answer 2

这是一个article（不是最近的，而是明确的），它解释了（如果我没有误解你的问题）回答你的问题。

例如，如果你替换：

.red span, .red{
background-color: #F00
}

作者：

.yellow .red span, .red{
    background-color: #F00
}

你的背景会是红色的。

问候。