问题：:not选择器改变了等效CSS选择器的求值顺序

这问题我太熟悉了——在靠声明顺序维持样式覆盖的大型CSS库中，:not()伪类+hover状态的组合很容易打破原有的平衡，核心原因是**选择器特殊性（specificity）**在搞鬼。

先拆解下你遇到的本质问题：
原本两个.grid选择器的特殊性完全相同（都是类选择器，权重为0,1,0），所以后声明的样式会自然覆盖前一个。但当你把其中一个改成.grid:not(:hover)时，这个选择器的特殊性变成了「类选择器（0,1,0） + 伪类选择器（0,1,0）」，总权重提升到0,2,0，比普通.grid的0,1,0更高。不管你把它写在哪个位置，它都会优先生效，直接破坏了你原本依赖的顺序覆盖逻辑。

接下来给你几个靠谱的解决方案，按推荐程度排序：

1. 让两个选择器的特殊性完全对齐 #

最稳妥的方式是给普通.grid也加一个无意义的:not()伪类，让它的特殊性和带:not(:hover)的保持一致。比如：

/* 你的非hover状态样式 */
.grid:not(:hover) {
  background: #fff;
}

/* 给需要覆盖的.grid加一个不存在的类的:not()，不影响选中范围，但提升特殊性 */
.grid:not(.unused-dummy-class) {
  background: #eee; /* 现在因为特殊性相同，后声明的依然会覆盖前一个 */
}

这里.unused-dummy-class是一个你永远不会用到的类名，所以:not(.unused-dummy-class)会选中所有.grid元素，但让这个选择器的特殊性变成0,2,0，和.grid:not(:hover)完全一致，这样声明顺序就重新起作用了。

2. 统一使用伪类结构 #

如果你的场景是区分hover和非hover状态，直接把两个状态的选择器都写成带伪类的形式，确保它们的特殊性相同：

.grid:not(:hover) {
  /* 非hover样式 */
}

.grid:hover {
  /* hover样式，特殊性同样是0,2,0，后声明就会覆盖非hover的样式 */
}

这种方式更语义化，也完全符合你原本的顺序依赖逻辑，不用额外加无用的类。

3. 慎用!important（迫不得已才用） #

如果上面的方法都没法实施（比如不能修改原有.grid的代码），可以在需要覆盖的样式后面加!important，但这是下下策——因为!important会打破整个CSS的优先级规则，后续维护会非常麻烦，不到万不得已别用。

总结一下：核心就是让需要依赖顺序覆盖的选择器保持完全相同的特殊性，这样声明顺序就会恢复它原本的作用啦。

内容的提问来源于stack exchange，提问作者Chase