为何这段SCSS代码会触发no-descending-specificity错误？

这个错误来自ESLint的no-descending-specificity规则，核心要求是CSS选择器必须按「特异性（权重）从低到高」的顺序书写——毕竟CSS里权重高的规则优先级更高，低权重的写在后面也覆盖不了前面高权重的，这种写法大多是无心的失误。

先算清楚你用到的几个选择器的权重（CSS权重规则：元素选择器权重为1，伪类选择器权重为10）：

• a：单个元素选择器，权重=1
• i a：两个元素选择器叠加，权重=1+1=2
• a:hover：元素选择器+伪类选择器，权重=1+10=11

两种顺序都报错的原因 #

你用了SCSS嵌套，a:hover是嵌套在a的规则里的，编译后它会紧跟在a的规则后面，没法单独拆出来调整位置。这就造成了两难：

• 要是把i a放在a规则后面，i a的权重（2）比a:hover的权重（11）低，违反规则，报错要求把i a移到a:hover前面；
• 要是把i a放在a规则前面，a的权重（1）比i a的权重（2）低，又违反规则，报错要求把a移到i a前面。

解决办法 #

你可以选以下方式处理：

• 调整选择器权重：给a加个类，比如.nav-link { color: red; &:hover { ... } }，这样.nav-link权重是10，i .nav-link权重是11，.nav-link:hover权重是20，按.nav-link → i .nav-link → .nav-link:hover的顺序写就符合规则了；
• 禁用规则检查：如果确定这种写法是你需要的，就在ESLint配置里针对该文件或选择器关掉no-descending-specificity规则；
• 取消嵌套拆分写：把a:hover单独拎出来，写成a { ... } → i a { ... } → a:hover { ... }，这样顺序就符合权重从低到高的要求了。

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