CSS倍数：不能按预期工作

Question

我有以下代码：

a {
    color: black
}

a:not(.test1) {
    color: red
}

a:not(.test1):not(.test2) {
    color: green;
}

a.test {
    color: blue
}

<a class='test'>
    TEST
</a>

为什么结果是绿色的？我预计结果颜色会是蓝色

Answer 1

选择器a:not(.test1):not(.test2)比a.test更具体。

如果检查元素并查看声明的样式，您会注意到两种样式都适用，但具有更多特异性的规则会获胜。

您可以解决此问题，声明另一个伪类也可以解释a.test，例如：

a:not(.test):not(.test1):not(.test2) {
    color: green;
}

但是，请考虑通过尽可能详细地声明过度限定样式规则来考虑。

:not() - CSS | MDN (Syntax reference)

代码段示范：

a {
    color: black
}

a:not(.test1) {
    color: red
}

a:not(.test):not(.test1):not(.test2) {
    color: green;
}

a.test {
    color: blue
}

<a class='test'>
    TEST
</a>
<br>
<a class='test1'>
    TEST 1
</a>
<br>
<a class='test2'>
    TEST 2
</a>
<br>
<a>
    TEST (no class)
</a>