CSS订单规则问题

Question

为什么following code导致红色而不是黑色？

HTML：

<div class="error classA" att="A"></div>

CSS：

div {
    width: 100px;
    height: 100px;
}

[att=A].classA {
    background-color: red;
}

.error {
    background-color: black;
}

如果我删除[att=A]，它会变成黑色，正如预期的那样。那是为什么？

Answer 1

这是因为CSS Specificity。 “红色”规则比“黑色”规则（具有此类的元素）更具体（具有此属性和此类的元素）。当你删除[att=A]时，它们具有相同的特异性，但由于黑色规则在文件的后面，它会获胜。

Answer 2

大多数特定选择器获胜，[att=A].classA比.error更具体。没有它，CSS中声明的最后一个获胜，例如：

.error {
    background-color: black;
}
.classA {
    background-color: red;
}

还会产生red。

Answer 3

因为在CSS中，特异性也会计入“级联”。

[att=A].classA定位属性和类名。

.error仅定位班级名称

因为第一个更具体，所以它应用于第二个顶部。

如果您想强制覆盖以前应用的样式，可以使用!important声明：

[att=A].classA {
    background-color: red !important;
}

但是，我应该注意，IE 忽略!important声明有buggy support，所以请小心使用。