后引入的CSS文件会覆盖前一个同名规则,前提是选择器权重相同;2. 使用!important可强制提升样式优先级,甚至覆盖内联样式和后加载的样式;3. 建议先引入通用样式,后引入自定义样式,并谨慎使用!important以保持代码可维护性。

在CSS中控制样式的优先级,主要依赖于引入顺序和!important声明。这两种方式可以单独使用,也可以结合使用,以达到预期的样式覆盖效果。
1. 通过 标签的引入顺序控制优先级
CSS文件通过 标签引入时,后引入的样式会覆盖前面同名的样式规则,前提是它们的选择器权重相同。
例如:
css">
ain.css">
如果 reset.css 和 main.css 中有相同的 CSS 规则(比如都设置了 h1 { color: red; }),那么 main.css 中的样式会生效,因为它在 HTML 中后加载。
立即学习“前端免费学习笔记(深入)”;
这个机制基于“层叠”原则:后面的样式表可以覆盖前面的,但仅限于选择器优先级相同时。
2. 使用 !important 强制提升优先级
当某个样式规则加上 !important,它将获得最高优先级,甚至可以覆盖内联样式和后引入的同名规则(除非后者也使用 !important)。
示例:
/* style1.css */
p { color: blue !important; }
/* style2.css */
p { color: red; }
即使 style2.css 后引入,p 标签的文字颜色仍为蓝色,因为 !important 提升了第一条规则的优先级。
注意:多个 !important 规则之间,仍然会根据引入顺序和选择器权重决定最终生效的样式。
3. 实际应用建议
合理利用引入顺序和 !important 可避免样式混乱:
- 把通用样式(如重置样式、框架样式)放在前面引入
- 把项目自定义样式放在后面,便于覆盖默认样式
- !important 应谨慎使用,主要用于临时调试或第三方库难以覆盖的场景
- 避免在多个规则中频繁使用 !important,否则会降低代码可维护性
基本上就这些。掌握好引入顺序和 !important 的使用时机,就能有效控制CSS样式的最终表现。










