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

Question

我知道这是可能在HTML中指定一个元素的多个类：

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

好像类是一个字符串从Javascript访问。

当类指定了冲突的属性时会发生什么？例如

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

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

Answer 1

阅读有关特异性：

• Simple explanation
• More in depth explanation

简短回答：如果两个选择器具有相同的特征，则最后一个要声明的胜利。

Answer 2

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

取决于样式表的顺序。稍后的样式声明优先。你可以反转两个CSS行来查看。

Answer 3

如果选择器具有same level of precedence（如它们在此处所做的那样），则以指定者后面的为优先。在这种情况下，背景应为绿色，但字体颜色为蓝色。

从CSS spec：

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

Answer 4

你用什么样式来称呼“级联样式表”。级联部分意味着它就像一个瀑布，未来的规则建立在（或覆盖）以前的规则上。因此，第二条规则将覆盖背景颜色属性，但它仍将保留字体颜色。

（注意与优先顺序，虽然，那熄灭的ID具有更高的优先级高于一个熄灭的一类，而不管他们的位置的规则。）

Answer 5

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

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

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

顺便说一句，这也是相同的功能，允许您在相同的选择器中使用相同的属性定义多个样式，以支持不同的浏览器功能。例如，一些浏览器可能不支持RGBA颜色，这样你就可以做到以下几点：

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

所有的浏览器会选择最后background声明他们支持，所以支持rgba浏览器会选择第二个，而浏览器那不会，会做第一个。

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

Answer 6

结果取决于类是在指定的顺序

这里是为了在其中CSS规则执行的好写了。 http://htmlhelp.com/reference/css/structure.html