浏览器如何解决冲突的类？答案

【问题标题】：How do browsers resolve conflicting classes?浏览器如何解决冲突的类？
【发布时间】：2011-11-30 01:12:46
【问题描述】：

我知道可以在 HTML 中为一个元素指定多个类：

<div class='one two'>Text</div>

似乎可以从 Javascript 中以单个字符串的形式访问类。

当使用冲突的属性指定类时会发生什么？比如

div.one {
  background-color: red; 
  color: blue;
}
div.two {
  background-color: green;
}

结果是否取决于指定类的顺序？例如，我是否可以合理地期望上面的 div 显示为蓝色文本和绿色背景，因为 two 类被评估为第二个，覆盖 background-color 属性？

【问题讨论】：

更多的是应该产生什么结果（wrt标准等）的问题。当然，我可以在我尝试支持的所有 8 种浏览器上对其进行测试，但两年后这些信息甚至可能都派不上用场了
阅读：htmlhelp.com/reference/css/structure.html#cascade
@FlyBy - 我不同意；你没看到人们在这里回答问题的速度有多快吗？？？ ;)
据我所知，这取决于编写的 css 文件中类的顺序。在这种情况下，无论 div 类是 one two 还是 two one，它都应该是绿色背景上的蓝色文本。如果您更改 css 并将之前的 div.two 定义为 div.one 您将在红色背景上看到蓝色文本...
名称“cascading”应该提供强有力的提示——“last”将优先并覆盖属性。任何孩子没有指定的东西都留给了父母，一直到页面自己的样式表和默认浏览器样式。

标签： html css dom

【解决方案1】：

CSS 有一个非常明确的优先顺序。

在这种情况下，其他所有条件都相同且优先级相同，浏览器应选择样式表中最后定义的样式。

在您给出的示例中，这意味着div.two 样式将覆盖div.one，其中两个都定义了相同的属性。

顺便说一句，这也是允许您在同一个选择器中定义具有相同属性的多个样式的相同功能，以支持不同的浏览器功能。例如，某些浏览器可能不支持 rgba 颜色，因此您可以执行以下操作：

.myclass {
    background: rgb(200, 54, 54);
    background: rgba(200, 54, 54, 0.5);
}

所有浏览器都会选择它们支持的最后一个background 声明，因此支持rgba 的浏览器将选择第二个，而不支持的浏览器将使用第一个。

这也是为什么当您使用供应商前缀样式时，您还应该在前缀版本之后指定无前缀版本，以便当该供应商的浏览器开始支持无前缀版本时样式，您可以确定它会使用它而不是前缀版本（可能不支持最终版本的所有功能）。

【讨论】：

除了颜色属性。
那么，将供应商前缀样式放在后面的问题是，在支持这两个版本的浏览器上，它会使用前缀一个（受支持版本的“标准”较少）？我不知道为什么这本身就是一个问题。
@Steven Lu - revendor prefixes：关键是一个前缀版本可能不支持最终版本的所有功能，但是更高版本的浏览器可能会继续支持前缀版本向后兼容性。但如果可能，您希望非前缀版本优先。
感谢您提供有关在出现不支持的功能时使用优先顺序提供后备的提示。

【解决方案2】：

阅读特异性：

简短回答：如果两个选择器具有相同的特异性，则最后一个被声明的选择器获胜。

【讨论】：

【解决方案3】：

结果取决于指定类的顺序。

这里有一篇关于 CSS 规则执行顺序的好文章： http://htmlhelp.com/reference/css/structure.html

【讨论】：

【解决方案4】：

您用来设置这些样式的方法称为“级联样式表”。级联部分意味着它就像一个瀑布，未来的规则建立在（或覆盖）之前的规则之上。因此，第二条规则将覆盖 background-color 属性，但仍会保留字体颜色。

（不过要注意优先级。脱离 id 的规则比脱离类的规则具有更高的优先级，无论它们放在哪里。）

【讨论】：

【解决方案5】：

如果选择器有same level of precedence（就像他们在此处所做的那样），则以稍后指定的为准。在这种情况下，背景应该是绿色，但字体颜色是蓝色。

来自CSS spec：

最后，按指定的顺序排序：如果两个声明具有相同的重量、来源和特异性，后者指定获胜。导入样式表中的声明被认为是在任何样式表本身的声明。

【讨论】：

【解决方案6】：

http://jsfiddle.net/mrtsherman/2NpXS/

取决于样式表的顺序。以后的样式声明优先。您可以反转两条 css 行来查看。

【讨论】：