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

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

如果选择器具有相同的优先级(就像它们在这里一样),则以后指定的优先级优先.在这种情况下,背景应为绿色,但字体颜色为蓝色.

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

Answer 4

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

（不过要注意优先级。从 id 出发的规则比从类出发的规则具有更高的优先级，无论它们放置在何处。）