根本原因是bootstrap使用无前缀、无作用域的全局选择器（如.btn、body、input），导致其高穿透性样式直接覆盖第三方组件；重置规则、动态插入dom及css变量污染进一步加剧冲突。
Bootstrap CSS 会影响第三方组件样式，根本原因不是它“想干扰”，而是它的规则天生具备高穿透性——.btn、body、input、table 这些选择器没加前缀、没限定作用域，浏览器照单全收，直接落到所有匹配元素上。
为什么 .btn 会覆盖 el-button 或 ant-btn 的圆角和 padding
不是第三方组件写得弱，是 Bootstrap 的 .btn 权重（0,0,1,0）虽不高，但它是全局生效的“基础锚点”：一旦你的第三方按钮内部用了 <button class="el-button"></button>，而它里面又套了个 <span></span> 或 <i></i>，Bootstrap 的 button:focus、button:disabled、甚至 button::-moz-focus-inner 都可能悄悄接管渲染逻辑。
- 常见现象：
el-buttonhover 无反馈、ant-btndisabled 状态颜色不对、shadcn/ui按钮边框变粗 - 真正触发点往往不是类名冲突，而是 Bootstrap 的重置规则（如
button { margin: 0; overflow: visible; }）破坏了第三方组件依赖的默认行为 - 打开 DevTools 的 Computed 面板，点开被划掉的
border-radius，来源若显示bootstrap.min.css，说明它已胜出
body 和 h1 这类全局选择器怎么偷偷改掉整个 UI 库的排版
Bootstrap 的 reboot.css（或 bootstrap-reboot.min.css）会重设几乎所有原生 HTML 元素的 margin、font-size、line-height、box-sizing。这些规则不挑容器，只要 DOM 里有 h2，它就管。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- Element Plus 的
el-dialog__header依赖h3默认 margin，但 Bootstrap 把h3 { margin-top: 0; }—— 头部瞬间贴顶 - Ant Design 的
ant-typography文字行高错乱，常因 Bootstrap 的* { box-sizing: border-box; }与它内部计算逻辑不一致 - 哪怕你只引入了 Bootstrap 的 JS（
bootstrap.bundle.min.js），某些构建工具也会顺带注入 reboot，静默生效
JS 组件动态插入的 DOM 为何总逃不出 Bootstrap 的“手掌心”
Modal、Tooltip、Popover 默认 append 到 document.body，而你的自定义样式（比如 .my-app .btn）只作用于子树。但 Bootstrap 的 .modal、.tooltip 规则没有父级限定——它们在 里，对 body 下任何节点都有效。
- 结果就是：弹窗背景是白的（
.modal-backdrop生效），但内容区没 padding（你的.my-app .modal-body根本没匹配到） - 更隐蔽的是 Popper.js 计算位置时，受
body { font-size: 1rem; }影响，导致 Tooltip 偏移量异常 - 这不是 Bug，是设计前提：Bootstrap 假设自己是页面唯一 UI 框架，所有动态节点都该遵守它的视觉契约
为什么 @import 或调整 <link> 顺序经常失灵
你以为把 element-plus.css 放在 bootstrap.min.css 后面就赢了？现代构建工具（Vite/Webpack/Rollup）会合并、排序、提取 CSS，最终生成的 index.css 里，规则顺序早已不是你 import 的顺序。
- 浏览器只认最终注入的 CSSStyleSheet 实例里的规则顺序，不认源码 import 顺序
- 打开「查看页面源代码」，确认
<link href="element-plus.css">是否真在bootstrap.css之后；如果没出现，说明它被构建工具打包进主 CSS 了 - 即使顺序对了，
.el-button:focus（0,0,2,0）仍可能输给button:focus+.btn的组合（0,0,2,0），权重相等时后声明者胜——但谁先声明，由构建结果决定，不可控
最易被忽略的一点：CSS 变量（--bs-primary、--ant-primary-color）一旦定义在 :root，就会全局污染。一个库改了 --bs-body-bg，另一个库基于它算出来的阴影色值就全偏了——这种影响看不见、摸不着，只能靠 Computed 面板里逐条比对变量值才能定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
