Css规则申请顺序

这篇文章(即使它基于一个让我在工作中遇到麻烦的事实)更多的是一个哲学问题,而不是一个真正的问题提交.

我跟着这个令人费解的案子翻了个身……

这不是一个真正的问题,因为我(我认为)理解这种现象,它是如何被统治的以及它具有的效果.

我做了以下示例: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,最终会出现令人讨厌的过于膨胀的规则.
在可维护性方面,这是一个暴行:'(

最佳答案 它被称为css的特异性.如果两个选择器与特定元素匹配并且它们具有相同的权重,则稍后出现的选择器将应用于该元素.

阅读this了解更多信息.

您的选择器.red span和.yellow span都具有0,1,1的权重(我提到的链接将详细解释如何计算权重),因此应用了最后一条规则.

另请阅读W3中的this文章,它将更好地解释事情.

希望所有这些都有道理:)

点赞