后引入的CSS样式会覆盖先引入的相同规则，因此应先引入基础样式（如reset.css、bootstrap.css），再引入自定义样式（如style.css），以确保自定义规则生效。
在HTML中使用CSS时，可以通过 <link> 标签引入外部样式表。样式的最终效果会受到引入顺序的影响，后引入的样式会覆盖先引入的相同规则。这个机制可以用来控制基础样式和自定义样式的优先级。
1. 基础样式与自定义样式的引入顺序
通常我们会先引入通用的基础样式（如重置样式、UI框架等），再引入项目自己的自定义样式。这样自定义样式就可以覆盖基础样式中的规则。
- 基础样式：如
reset.css、bootstrap.css - 自定义样式：如
style.css或custom-theme.css
通过调整 <link> 的书写顺序实现覆盖：
<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css">
在这个例子中，style.css 中的同名CSS规则会覆盖前面文件中的定义。
立即学习“前端免费学习笔记（深入）”；
2. 覆盖机制的工作原理
CSS遵循“后来居上”的层叠规则。当多个样式表对同一个元素设置相同的属性时，浏览器会选择最后加载的那条规则。
- 选择器权重相同时，后引入的样式生效
- 即使前一个样式写在页面内（
<style>标签），外部样式仍按加载顺序参与层叠 - 内联样式（
）优先级最高，不受此顺序影响
例如：
/* reset.css */
body {
margin: 0;
font-family: Arial, sans-serif;
}
<p>/<em> style.css </em>/
body {
font-family: "Helvetica Neue", sans-serif; /<em> 会生效 </em>/
}</p>由于 style.css 后加载，字体设置会被替换。
3. 实际应用建议
合理利用加载顺序可以让项目更易维护：
- 把第三方库或框架样式放在前面
- 将项目定制样式放在最后
- 避免使用
!important强行覆盖，优先用顺序控制 - 可分模块引入，如主题、布局、组件等，按需排序
结构示例：
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/bootstrap-grid.css"> <link rel="stylesheet" href="css/layout.css"> <link rel="stylesheet" href="css/components.css"> <link rel="stylesheet" href="css/theme.css">
基本上就这些——不复杂但容易忽略细节。掌握好引入顺序，能让你的样式管理更清晰。
