2

关于 HTML类属性分配了两个或多个类名，即

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

我可以使用不同的浏览器对其进行测试——参见http://jsfiddle.net/PP9yf/1/上的测试或这个问题/答案 ——并推断出一个常识规则：

class="a"如果已定义则使用，或者如果class="b"已定义则使用，或者如果两者都定义则使用两者……并且，当同时使用两者时，如果它们分配相同的属性，则最后一个 CSS 定义会覆盖其他 CSS 定义。

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

但这是W3C官方的解释吗？

W3C 标准哪里有说这个规则的？

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

示例：CssToInlineStyles需要此更正...但只需要“更正”如果有 W3C 标准并且说软件错误。

4

1 回答 1

5

您的发现是正确的，它们是 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 rule 3.2 itens中的常识规则itens，

  • «如果已定义，则使用 class="a"，如果已定义，则使用 class="b"，如果两者都已定义，则使用 BOTH » 等同于 3.2.1，«如果选择器与相关元素匹配，则应用声明» .

  • «最后一个 CSS 定义覆盖了其他的»等同于 3.2.5 ，«后者指定获胜»。

新标准没有改变：CSS2、CSS2.1 和 CSS3 使用相同的规则。

于 2012-12-12T22:26:54.607 回答