CSS优先级问题：如何不新增类替换input的box-shadow属性值？

这是典型的CSS优先级冲突问题，我来给你拆解原因和可行的解决方案：

为什么Button 1显示蓝色阴影？ #

input[type="button"]这个选择器的优先级是元素选择器（权重1） + 属性选择器（权重10），总权重为11；而.btn-active类选择器的权重只有10。哪怕calib.css是后引入的，因为前者优先级更高，所以蓝色阴影规则会覆盖红色的。

不用新建类的解决方案 #

你只需要提升.btn-active选择器的优先级，让它超过input[type="button"]即可，这里有两种常用方式：

方案1：增强选择器特异性（推荐）

修改calib.css中的规则为：

input[type="button"].btn-active {
  box-shadow: 0 0px 10px red;
}

这个选择器的权重是元素选择器（1） + 属性选择器（10） + 类选择器（10），总权重21，完全碾压原来的11，不管CSS文件的引入顺序，红色阴影都会生效。

如果觉得写全属性选择器麻烦，也可以简化成：

input.btn-active {
  box-shadow: 0 0px 10px red;
}

这个选择器权重是11，和input[type="button"]相同，但因为calib.css在main.css之后加载，相同权重下后声明的规则会覆盖先声明的，同样能达到效果。

方案2：使用!important（不推荐）

虽然可以通过!important强制覆盖所有规则，但这会破坏正常的CSS优先级链，后续维护容易出问题，除非没有其他办法，否则不建议使用：

.btn-active {
  box-shadow: 0 0px 10px red !important;
}

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