如何在CSS渲染中解释HTML多个类名？W3C怎么说呢？

Question

关于分配有两个或多个类名的HTML 类属性,即

<tag class="a b">....</tag>

我可以用不同的浏览器测试它 - 参见http://jsfiddle.net/PP9yf/1/上的测试或这个问题/答案 - 并推导出常识规则:

使用class="a"如果它被定义,或者使用class="b",如果它被定义,或者同时使用如果两个定义 ......而且,同时使用时,如果他们分配相同的属性,最后CSS定义覆盖他人.

因此,我们可以解释例如class="a b"必须与之相同class="b a".

但它是W3C官方解释？

哪个W3C标准说这个规则？

---

PS:我从另一个问题开始,但我的动机是软件开发.我需要这个规范的答案来开发类似于emogrifier等的软件.

示例:CssToInlineStyles需要进行此更正...但只需要"更正",如果有W3C标准并且说软件错误.

Answer 1

你的发现是正确的,而且他们是正式的W3C规范.

元素本身的两个类具有相同的"起源".此外,选择器具有相同的"重量".由于这些规则和其他规则不确定哪种样式具有优先级,因此样式表的顺序决定了否定规则.

有关指定此规则的规则,请参阅层叠样式表,第1级,第3.2段.3.2.1到3.2.4不要区分这两种风格中的任何一种.以3.2.5为准.

我将引用这里的规则,尽管您可能希望阅读文档以将它们放在上下文中.

冲突规则是CSS机制固有的.要查找元素/属性组合的值,必须遵循以下算法:

1. 查找适用于相关元素/属性的所有声明.如果选择器与相关元素匹配,则声明适用.如果没有声明适用,则使用继承的值.如果没有继承值("HTML"元素和不继承的属性就是这种情况),则使用初始值.
2. 通过显式权重对声明进行排序:标记为"!important"的声明比未标记(正常)声明更重要.
3. 按原点排序:作者的样式表覆盖了读取器的样式表,该样式表覆盖了UA的默认值.导入的样式表与其导入的样式表具有相同的原点.
4. 按选择器的特异性排序:更具体的选择器将覆盖更一般的选择器.要查找特异性,请计算选择器中的ID属性数(a),选择器中的CLASS属性数(b)以及选择器中的标记名称数(c).连接三个数字(在具有大基数的数字系统中)给出了特异性.
5. 按指定顺序排序:如果两个规则具有相同的权重,则后者指定获胜.导入样式表中的规则被认为是样式表本身中的任何规则之前的规则.

总结

我们可以在W3C CSS1规则3.2 itens中翻译常识规则,

• « use class ="a"如果已定义,或使用class ="b"(如果已定义),或者如果两个定义的 »等同于3.2.1 则使用BOTH,« 如果选择器与所讨论的元素匹配,则声明适用 » .

• « 最后一个CSS定义覆盖其他CSS定义 »等同于3.2.5,« 后者指定胜利 ».

新标准没有改变:CSS2,CSS2.1和CSS3使用相同的规则.