无法覆盖CSS specificity规则修改导航栏指定元素颜色求助

问题根因 #

你最初编写的CSS选择器存在属性匹配错误：mid-el是目标li元素的id属性，不是class属性，你使用的li.mid-el是类选择器，只能匹配class属性包含mid-el的li元素，完全匹配不到目标元素，所以规则不会生效。

正确写法 #

将选择器中的.mid-el替换为id选择器#mid-el即可：

/* 写法1：同时匹配a元素的id，优先级更高 */
nav.nav-bar ul.group-one li#mid-el a#mid-a {
  color: rgb(25,2,80);
}

/* 写法2：你完整代码中已经写的规则本身也是有效的，权重足够覆盖默认样式 */
nav.nav-bar ul.group-one li#mid-el a {
  color: rgb(25,2,80);
}

特异性规则说明 #

CSS样式优先级按特异性权重从高到低判定，权重计算规则为：

• 内联样式（写在元素style属性中）：权重1000
• ID选择器：单个权重100
• 类选择器/属性选择器/伪类选择器：单个权重10
• 元素选择器/伪元素选择器：单个权重1

比较时从最高位开始对比，高位数值大的规则优先级更高，与低位数值无关。
你写的正确规则权重为：1个ID选择器（#mid-el，写法2）+ 2个类选择器（.nav-bar、.group-one） + 4个元素选择器（nav、ul、li、a），总权重远高于设置白色的基础规则li,a（仅1个元素选择器，权重1），完全可以覆盖默认样式，不需要加!important。

排查建议 #

如果修改选择器后仍不生效，可按以下步骤排查：

• 检查所有类名、id名的拼写是否存在大小写错误、拼写错误
• 打开浏览器开发者工具（F12），选中目标a元素，查看「计算样式」中的color属性，确认是哪条规则覆盖了你的样式
• 清除浏览器缓存后重新加载页面，避免本地旧CSS缓存影响

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