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

了解特异性：

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

Answer 2

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

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

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

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

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

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

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

Answer 3

如果选择器具有same level of precedence（就像它们在这里一样），则指定以后的优先。在这种情况下，背景应为绿色，但字体颜色为蓝色。

来自CSS spec：

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

Answer 4

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

（但要注意优先级。除了id以外，一个规则具有更高的优先级，而不管它们放在何处，它的优先级高于一个规则。）

Answer 5

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

Answer 6

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

这是对CSS规则执行顺序的一个很好的描述： http://htmlhelp.com/reference/css/structure.html