CSS订单规则问题

Question

为什么以下代码会产生红色而不是黑色？

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特异性."红色"规则比"黑色"规则(具有此类的元素)更具体(具有此属性和此类的元素).当你删除[att=A]它们时,它们具有相同的特异性,但由于黑色规则稍后在文件中,它会获胜.