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] 时，它们具有相同的特异性，但因为黑色规则位于文件的后面，所以它获胜。