为何该CSS选择器优先级高于更具特异性的选择器？

你遇到的问题核心是CSS选择器的特异性计算规则，并不是你以为的“单个类选择器优先级更高”，我们来一步步拆解：

为什么.Nav button会覆盖.MainBtn的样式？ #

CSS的优先级是通过特异性权重来判断的，权重用四位数字(a, b, c, d)表示，计算规则如下：

• a：内联样式的数量
• b：ID选择器的数量
• c：类、伪类、属性选择器的数量
• d：元素、伪元素选择器的数量

我们来计算你提到的两个选择器的权重：

• .Nav_Nav__WC_B6 button：包含1个类选择器（.Nav_Nav__WC_B6） + 1个元素选择器（button）→ 权重为 (0, 0, 1, 1)
• .MainBtn_MainBtn__92Bu4：仅包含1个类选择器 → 权重为 (0, 0, 1, 0)

显然.Nav button的权重更高，所以哪怕.MainBtn的规则在DevTools里显示在后面，它还是会被前者覆盖。

解决方案 #

这里提供几种实用的解决思路，你可以根据项目需求选择：

1. 提升MainBtn选择器的特异性 #

修改MainBtn.module.css的规则，给类选择器加上元素类型，让它的权重和.Nav button持平：

/* 原代码 */
.MainBtn { font-size: 14px; }

/* 修改后 */
button.MainBtn { font-size: 14px; }

此时它的权重变为(0, 0, 1, 1)，和.Nav button相同。由于你的MainBtn.module.css是在Nav.module.css之后加载的（从DevTools的规则顺序可以看出），后面的规则会覆盖前面的，这样MainBtn的14px字体大小就能生效。

2. 限制Nav样式的作用范围 #

不让Nav的样式影响所有按钮，只针对BasicBtn。你可以给BasicBtn添加一个全局标记类（避免CSS模块哈希类名的干扰）：
在BasicBtn.js中添加全局类：

import styles from "./BasicBtn.module.css"
import cn from "classnames"
const BasicBtn = ( { children, extraStyles } ) => {
  return <button className={ cn( styles.BasicBtn, 'global-basic-btn', extraStyles ) }>{ children }</button>
}
export default BasicBtn

然后修改Nav.module.css：

/* 原代码 */
.Nav button { font-size: 20px; }

/* 修改后 */
.Nav .global-basic-btn { font-size: 20px; }

这样Nav的样式只会作用在带有global-basic-btn类的按钮上，不会干扰MainBtn的自定义样式。

3. 使用CSS变量（最优雅的方案） #

利用CSS变量的就近生效特性，彻底避开特异性问题：
首先在BasicBtn.module.css中定义变量：

.BasicBtn {
  padding: 10px;
  background: green;
  color: white;
  font-size: var(--btn-font-size, 24px); /* 默认使用全局的24px */
}

然后在Nav.module.css中设置变量，影响子元素：

.Nav {
  --btn-font-size: 20px;
}

最后在MainBtn.module.css中重置变量：

.MainBtn {
  --btn-font-size: 14px;
}

CSS变量会遵循“就近原则”，MainBtn的类直接作用在button元素上，所以它的变量值会覆盖Nav的，完美实现需求。

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