Bootstrap CSS加载顺序决定覆盖结果，而非选择器权重；它必须在第三方样式之前引入才能重置基础样式，否则会被后者覆盖。
Bootstrap CSS加载顺序压过第三方样式
根本不是选择器权重高，而是它在HTML里被放在了第三方样式之前——浏览器按解析顺序层叠，后加载的样式才能覆盖前者。你看到.btn被Bootstrap重置，大概率是因为bootstrap.min.css在ant-design.css或element-plus.css之前引入，哪怕第三方库本身用了!important，只要它先加载，Bootstrap后加载且选择器权重相同，照样赢。
- 检查
<head>中标签顺序：Bootstrap必须在第三方CSS之后（如果你想让它被覆盖）；反之，若你想用Bootstrap重置基础样式，则它必须在最前 - Vite/webpack项目里，
import 'bootstrap/dist/css/bootstrap.min.css'和import 'antd/dist/reset.css'的书写顺序 ≠ 最终HTML顺序，得看打包产物中的排列 - CDN引入时务必带协议：
https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css，否则file://测试下会404，导致样式加载失败，第三方样式“意外”生效
Bootstrap reboot.css全局重置劫持了基础元素
reboot.css（Bootstrap 5+内置）会重置body、h1、button、input等原生标签的margin、font-family、line-height。第三方组件如Element Plus或MUI默认不带这类重置，一旦Bootstrap的reboot生效，它们的按钮、输入框就立刻“变样”——圆角没了、字体变了、行高塌了。
- 这不是Bug，是设计：Bootstrap假设你用它做整站基础样式，第三方组件只是插件；而Ant Design等则假设自己是唯一UI层
- 查DevTools的Computed面板，点开任意
<button>，看font-family来源是不是reboot.css里的body规则，而不是组件自己的class - 解法不是删reboot，而是用
@layer reset显式分层，把第三方reset也纳入同层，再用@layer base统一控制
类名冲突导致第三方组件丢失关键样式
比如你同时用Bootstrap和Tailwind，都定义了.text-center，但Bootstrap的版本设了!important，Tailwind没加；或者两者都写了.mb-2，但计算逻辑不同（Bootstrap用margin-bottom: 0.5rem，Tailwind可能用margin-bottom: 0.5rem !important）。结果就是按钮文字居中了，但右边距突然消失。
- 不要复用工具类名：把
text-center改成section-title--center，彻底避开歧义 - 用属性选择器精准定位第三方组件：
[class*="ant-btn"]比.ant-btn更抗哈希类名变化 - Vue/React中避免
::v-deep .form-control这种写法——Bootstrap的.form-control可能被scoped属性隔离，实际匹配不到子组件内部节点
JS动态插入的DOM脱离你的CSS作用域
Bootstrap的Modal、Tooltip默认append到document.body，而你的自定义CSS作用域可能只限于#app或某个容器。结果就是Modal弹出来，背景还是白色，按钮还是默认蓝——因为.modal .btn-primary这条规则根本没匹配到body下的节点。
立即学习“前端免费学习笔记（深入）”；
- 初始化时强制指定
container：new bootstrap.Modal(el, { container: '#my-app' }) - Tooltip/Popover用
data-container="#my-app"属性，别依赖默认行为 - 如果第三方组件也用类似机制（比如某些图表弹窗），同样要查它的
container配置项，不能假设它和你CSS的作用域一致
!important也穿不透。 
