bootstrap不提供自定义伪类选择器，其交互状态依赖预编译的硬编码伪类（如:hover、:focus）和class切换（如.is-invalid），不支持注册新伪类或动态扩展，需通过高权重css覆盖、data属性+js或sass源码修改实现定制。
Bootstrap 本身不提供自定义伪类选择器
Bootstrap 的 CSS 是预编译生成的静态规则，:hover、:focus、:disabled 等原生伪类由框架内部在写 .btn、.form-control 等样式时直接硬编码使用，它不暴露 :is()、:where() 或用户可插拔的伪类钩子。你不能通过配置项或 JS API “注册”一个新伪类来触发 Bootstrap 的响应逻辑。
常见误解是以为加个 .btn:active 就能覆盖，其实 Bootstrap 已经写了 .btn:focus 和 .btn:active，但它们的优先级和具体声明位置（比如是否带 !important、是否在 @media 内）会影响你后续覆盖的效果。
- Bootstrap 5 默认用
box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25)实现 focus outline，但这个规则被包裹在@media (prefers-reduced-motion: reduce)里，普通 CSS 覆盖时容易漏掉媒体查询条件 - 所有伪类样式都依赖于 Bootstrap 源码中
$enable-important-utilities和$enable-hover-media-query这类 Sass 变量，你在 CDN 引入时无法动态开关 - 如果你用的是 Bootstrap 5+ 的 CSS 变量版本（如
--bs-btn-hover-bg），伪类状态仍靠传统类名或属性驱动，变量本身不感知伪类生命周期
扩展伪类行为必须绕过 class-based 状态管理
Bootstrap 的交互状态（如按钮按下、输入框聚焦）全部靠 class 切换（.was-validated、.is-invalid）或原生表单属性（disabled、required）触发，它不监听 :focus-within 或 :has() 这类较新伪类 —— 因为 IE 和旧版 Safari 不支持，而 Bootstrap 5 仍需兼容部分旧环境（哪怕只是文档标注）。
想用 :has(.error) 控制父容器样式？不行。Bootstrap 没有为此预留任何 class 命名空间或 data 属性约定。你得自己写独立 CSS，并确保选择器优先级高于 Bootstrap 的 .form-floating .form-control:focus ~ label 这类链式规则。
- 推荐做法：用
[data-state="error"]这类自定义属性代替伪类，再用 JS 主动 toggle，这样能和 Bootstrap 的.is-invalid共存且不冲突 - 避免用
!important强盖，Bootstrap 5 的.btn:hover规则权重是0,1,1,1（1 个 class + 1 个伪类），你写.my-btn:hover权重一样，后出现者胜 —— 所以加载顺序比写法更重要 - 如果项目已用 Sass，直接修改
_buttons.scss里的&:hover块比外部覆盖更可控，但会失去上游更新能力
伪类扩展带来的实际性能与维护代价
每次为 Bootstrap 组件添加新的伪类逻辑（比如让 .card 在 :has(> .alert) 时自动加边框），本质是在增加 CSS 规则复杂度和浏览器重排压力。尤其 :has() 在某些场景下会阻止样式懒计算，Chrome 110+ 虽支持，但 Safari 15.4+ 才开始有限支持，而 Bootstrap 官方文档至今未将 :has() 列为“推荐用法”。
- 真实影响：一个含
:has(:focus)的规则会让整个父元素树在任意子元素 focus 时重新计算样式，比单纯监听focusin事件开销更大 - 构建时注意：Webpack/Vite 的 CSS 提取插件（如
mini-css-extract-plugin）可能把你的:has()规则误判为不兼容语法而丢弃，需显式配置ignore: [/has/] - 测试盲区：Playwright/Cypress 默认不触发
:has()对应的 DOM 状态变化，E2E 测试里要手动element.focus()并waitForSelector配合验证
真正该优先考虑的替代路径
与其硬塞伪类进 Bootstrap 体系，不如接受它的设计边界：它是一个 class-first、渐进增强的工具包，不是 CSS-in-JS 那种运行时样式引擎。多数所谓“扩展伪类”的需求，其实用 data- 属性 + JS + 少量 utility class 就能干净解决。
- 例如实现“输入框有值时显示清除按钮”，Bootstrap 本身没提供
:not(:placeholder-shown)的配套 class，但你可以加data-has-value并用.form-control[data-has-value] ~ .btn-clear控制显示 - 用
IntersectionObserver替代:target做锚点高亮，避免页面跳转抖动，也绕开了 Bootstrap.nav-link.active和伪类的耦合冲突 - 所有自定义伪类逻辑，建议统一收口到一个
_custom-states.css文件，放在 Bootstrap CSS 之后引入，并在 build 脚本里加 lint 规则禁止出现:has(以外的实验性伪类
伪类不是银弹。Bootstrap 的稳定性和可预测性，恰恰来自它对运行时样式的克制 —— 这一点，在你打开 DevTools 看到 200+ 行 .btn 相关规则时，就该意识到扩展成本远不止写几行 CSS 那么简单。
