为何父组件CSS Modules样式会覆盖子组件CSS Modules样式？

兄弟，我太懂你这种困惑了！明明CSS Modules主打组件样式隔离，结果子组件的按钮样式还是被父组件盖了——其实这不是CSS Modules的问题，是CSS选择器优先级在搞鬼！

问题根源 #

你看App.module.css里写的是.App button，这个选择器是「类选择器 + 元素选择器」，优先级权重是0,0,1,1；而Person.module.css里的.personBtn只是单纯的类选择器，权重是0,0,1,0。哪怕CSS Modules给这两个类名都加了唯一的哈希后缀（比如.App_abc123 button和.personBtn_def456），CSS的优先级规则还是生效的——权重高的选择器会被浏览器优先应用，所以子组件按钮的蓝色背景就被父组件的绿色背景覆盖了。

解决方案 #

这里给你两种靠谱的解决办法，选哪种看你的需求：

1. 提升子组件按钮的选择器优先级

在Person.module.css里，把按钮的选择器改成和父组件同权重甚至更高的：

/* 方案A：和父组件选择器权重持平 */
.Person button {
  background-color: blue;
}

/* 方案B：权重更高，确保不会被覆盖 */
.Person .personBtn {
  background-color: blue;
}

这样一来，子组件按钮的选择器权重要么和父组件持平（此时因为样式作用在子组件内部的DOM上，浏览器会优先应用这个样式），要么直接超过父组件，就能正常显示蓝色背景了。

2. 限制父组件选择器的作用范围

如果你不想修改子组件的样式，可以调整App.module.css里的按钮选择器，让它只作用于App组件直接子元素的按钮：

.App > button {
  background-color: green;
  color: white;
  font: inherit;
  border: 1px solid blue;
  padding: 8px;
  cursor: pointer;
}

>是子选择器，只会选中.App容器下直接的<button>元素（也就是你的Toggle按钮），不会影响子组件Person内部的按钮，这样两个组件的按钮样式就彻底隔离了。

小提醒 #

CSS Modules解决的是类名冲突的问题，但它不会改变CSS本身的优先级规则。以后写样式的时候，尽量避免在父组件里写范围太广的选择器（比如直接button或者.parent button），不然很容易不小心覆盖子组件的样式哦。

内容的提问来源于stack exchange，提问作者Ronen Ben-Jacob