关于分配有两个或多个类名的HTML class 属性,即
<tag class="a b">....</tag>
我可以使用不同的浏览器对其进行测试 - 请参阅http://jsfiddle.net/PP9yf/1/或this question/answer处的测试 - 并推导出常识规则:
如果已定义则使用
class="a"
,如果已定义则使用class="b"
,或者如果已定义则使用BOTH ......并且,如果同时使用两者,则使用class="a b"
分配相同的属性,最后一个CSS定义会覆盖其他的。
因此,我们可以解释一下class="b a"
必须与{{1}}相同。
但这是W3C官方解释?
哪个W3C标准说这个规则?
PS:我从this other question开始,但我的动机是软件开发。我需要这个规范性的答案来开发类似于emogrifier等的软件
示例:CssToInlineStyles需要进行此更正...但只需要进行&#34;更正&#34;如果有一个W3C标准并说该软件是错误的。
答案 0 :(得分:5)
您的发现是正确的,和它们是官方的W3C规范。
元素本身的两个类具有相同的“原点”。此外,选择器具有相同的“重量”。 由于这些规则和其他规则不确定哪种样式具有优先级,因此样式表的顺序决定了否定。
有关指定此规则的规则,请参阅Cascading Style Sheets, level 1, paragraph 3.2。 3.2.1到3.2.4不要区分这两种风格中的任何一种。它的优先级为3.2.5。
我会引用这里的规则,尽管您可能希望阅读该文档以将其置于上下文中。
冲突规则是CSS机制固有的。要查找元素/属性组合的值,必须遵循以下算法:
- 查找适用于相关元素/属性的所有声明。如果选择器匹配元素,则声明适用 题。如果没有声明适用,则使用继承的值。如果 没有继承的值(“HTML”元素就是这种情况 对于不继承的属性,使用初始值。
- 按明确权重对声明进行排序:标记为'!important'的声明比未标记(正常)声明更重要。
- 按来源排序:作者的样式表覆盖读者的样式表,该样式表覆盖UA的默认值。进口风格 sheet与其所在的样式表具有相同的原点 导入。
- 按选择器的特异性排序:更具体的选择器将覆盖更一般的选择器。要找到特异性,请计算数字 选择器(a)中的ID属性,CLASS属性的数量 在选择器(b)中,以及选择器(c)中的标签名称的数量。 连接三个数字(在具有大基数的数字系统中) 给出了特异性。
- 按指定顺序排序:如果两个规则具有相同的权重,则后者指定获胜。考虑导入样式表中的规则 在样式表本身的任何规则之前。
醇>
我们可以在W3C CSS1规则3.2 itens中翻译常识规则,
«如果定义则使用class =“a”,如果定义则使用class =“b”,如果两个定义的»等同于3.2.1,则使用BOTH ,«声明适用于选择器与相关元素匹配»。
«最后一个CSS定义覆盖其他CSS »等同于3.2.5,«后者指定胜利»。
新标准没有改变:CSS2,CSS2.1和CSS3使用相同的规则。