直接写 .btn-primary 覆盖无效，因 bootstrap 多组件（如 .btn-group、.nav）嵌套深且组合选择器（如 .btn-group > .btn）特异性更高，会压过 .btn-primary；devtools 中规则常被划掉或仅部分生效。
为什么直接写 .btn-primary 覆盖无效？
因为 Bootstrap 的很多组件（比如 .btn-group、.input-group、.nav）内部结构嵌套深，且多个 class 共存。你写的 .btn-primary 规则权重可能被 .btn.btn-primary 或 .btn-group > .btn 这类组合选择器压过——后者特异性更高，浏览器优先用它。
常见错误现象：样式写了，DevTools 里能看到规则，但被划掉；或者只在部分按钮上生效，另一些没反应。
-
.btn-group > .btn比.btn权重高（10+1 > 10） -
.nav > .nav-link只匹配直接子<a></a>，不匹配包裹在<li>里的链接 - Bootstrap 5 的
.form-check内部结构是<input> + <label></label>，想改 label 样式，得用兄弟选择器.form-check-input + .form-check-label，不是.form-check .form-check-label
> 选择器在 Bootstrap 布局中怎么用才稳？
子元素选择器 > 是控制作用域最干净的方式，尤其适合避免污染全局或误改嵌套更深的组件。
典型场景：
- 只改
.card直接子.card-body，不碰.card-header .card-body：.card > .card-body { padding: 1.5rem; } - 限制
.list-group下第一层.list-group-item的圆角，不波及嵌套的子列表：.list-group > .list-group-item:first-child { border-top-radius: 0.5rem; } -
.navbar-nav的直接子.nav-link加间距，但留出下拉菜单内部链接的紧凑性：.navbar-nav > .nav-link { margin-right: 1rem; }
注意：> 不会穿透 Portal 渲染的节点（如 tooltip、modal），它们被 append 到 ，脱离原始父级 DOM，此时 > 失效，得靠方位类名（如 .bs-tooltip-top）或 :root 变量驱动。
哪些 Bootstrap 组件必须用 > 才能精准控制？
以下组件的默认样式大量依赖直接子关系，跳过 > 很容易改错层级：
-
.btn-group：按钮间距、边框合并逻辑全靠.btn-group > .btn控制，写成.btn-group .btn会把下拉菜单里的按钮也带上边框 -
.input-group：只有.input-group > .input-group-text和.input-group > .form-control才能正确对齐，后代选择器会让内部嵌套的.input-group子项错位 -
.dropdown-menu：其内部.dropdown-item必须用.dropdown-menu > .dropdown-item，否则会干扰.navbar-nav .dropdown-item的悬停效果 -
.alert中的.alert-link：Bootstrap 写的是.alert > .alert-link，你若用.alert .alert-link，就会把 alert 内部卡片里的链接也变色
用 > 时最容易忽略的兼容细节
子选择器看似简单，但在实际项目里常因 HTML 结构微小变动而失效：
- Bootstrap 5 的
.card默认结构不含 wrapper 元素，但如果你加了<div class="card"><div><div class="card-body">...</div></div></div>，那.card > .card-body就完全不匹配 -
.form-check要求<input>和<label></label>同级，如果中间插了个<span></span>，.form-check-input + .form-check-label就断了 - Vue / React 中动态插入节点时，可能绕过预期 DOM 层级，建议配合 DevTools 的“强制状态”功能验证
:hover、:checked下的实际结构 - 不要假设所有版本结构一致：Bootstrap 4 的
.btn-group用.btn-group-btn包裹按钮，5.x 已移除该 wrapper，>规则需同步调整
真正起作用的永远是最终渲染出的 HTML 结构，而不是你写的 class 名或框架文档里的“理想结构”。每次改样式前，先右键检查元素，确认父子关系再下笔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
