要成功覆盖CSS框架默认样式，需提高自定义样式优先级。1. 使用更具体的选择器，如增加层级或属性选择器提升权重；2. 谨慎使用!important，仅在必要时强制覆盖；3. 确保自定义CSS文件在框架后引入，利用层叠顺序生效；4. 优先采用框架支持的Sass变量或CSS自定义属性进行主题定制，实现规范化修改。
在使用CSS框架（如Bootstrap、Tailwind CSS、Bulma等）时，经常会遇到需要覆盖默认样式的情况。由于框架自带的样式优先级较高，直接写普通CSS可能无法生效。要成功覆盖默认样式，关键在于提高自定义样式的优先级。以下是几种实用方法：
1. 使用更具体的选择器
CSS的优先级遵循“选择器越具体，优先级越高”的规则。通过增加选择器的层级或使用ID、属性选择器等方式，可以提升权重。
- 避免使用过于简单的选择器，如
.btn { ... } - 改用更具体的形式，如
.my-class .btn.primary-btn { ... }或button.custom-btn[type="submit"] { ... }
2. 利用 !important（谨慎使用）
在紧急情况下，可以在自定义样式中添加 !important 来强制覆盖框架样式。
- 例如：
.custom-text { color: red !important; } - 注意：过度使用会降低代码可维护性，应尽量避免
- 建议仅在调试阶段临时使用，或用于第三方组件难以覆盖的场景
3. 调整CSS引入顺序
CSS后加载的样式会覆盖前面同优先级的规则。确保你的自定义样式表在框架样式之后引入。
立即学习“前端免费学习笔记（深入）”；
- HTML中正确顺序示例：
<link href="bootstrap.css" rel="stylesheet"><link href="custom.css" rel="stylesheet">
4. 使用CSS自定义属性或Sass变量（如果支持）
一些现代框架（如Bootstrap 5）允许通过Sass变量或CSS自定义属性提前定制主题，从根本上避免覆盖问题。
- 修改 $primary-color 等变量后再编译CSS
- 或在:root中定义 --bs-primary 替换原色值
- 这种方式更规范，适合大规模定制
基本上就这些。掌握选择器优先级和引入顺序，合理使用!important，再结合框架提供的定制能力，就能灵活控制样式表现而不破坏整体结构。
