为何无法覆盖li:nth-child设置的样式？CSS优先级技术疑问

这是CSS优先级在搞鬼！让我给你拆解清楚背后的原因：

先搞懂CSS优先级的计算规则 #

CSS选择器是按「权重值」来决定谁的样式生效的，简单总结几个核心权重等级：

• 元素选择器（比如li）、伪元素选择器：权重值 1
• 类选择器、伪类选择器（比如:nth-child）、属性选择器：权重值 10
• ID选择器：权重值 100
• 行内样式：权重值 1000
• 带!important的样式会直接覆盖所有其他样式（尽量少用，容易打乱样式逻辑）

你的两个选择器权重对比 #

咱们来算一算你写的两个选择器的权重：

• li:nth-child(2n+1)：元素选择器(li) + 伪类选择器(:nth-child)，总权重是 1 + 10 = 11
• .hmm：单纯的类选择器，总权重是 10

因为11 > 10，所以li:nth-child(2n+1)的样式优先级更高，哪怕你把.hmm写在后面也没用——只有当两个选择器权重相同时，后面的样式才会覆盖前面的。

解决方法 #

给你几个可行的方案：

1. 提升.hmm的权重（推荐）：把选择器改成li.hmm，这样总权重变成1 + 10 = 11，和li:nth-child(2n+1)权重持平，这时候后面的.hmm样式就会生效了：

   li:nth-child(2n+1){ color: red; font-weight:normal; }
   li.hmm{ color:green; font-weight:bold; }
   

2. 用!important强制覆盖（不推荐）：给.hmm的样式加上!important，直接跳过优先级判断：

   .hmm{ color:green !important; font-weight:bold !important; }
   

3. 调整选择器逻辑：比如如果你的需求是奇数位置的li默认红色，但带.hmm的不管位置都变绿，也可以考虑用:not(.hmm)来修改第一个选择器：

   li:nth-child(2n+1):not(.hmm){ color: red; font-weight:normal; }
   .hmm{ color:green; font-weight:bold; }
   

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