精准定位bootstrap 5所有禁用按钮需同时覆盖.btn:disabled、.btn.disabled、.btn[disabled]三类选择器，缺一不可；覆写时必须显式声明pointer-events: auto和filter: none，并加!important确保生效。
如何精准定位Bootstrap 5中所有禁用按钮的CSS选择器
Bootstrap 5对禁用按钮的样式控制分散在多个地方：既有.btn:disabled，也有.btn.disabled（注意不是:disabled伪类），还有.btn[disabled]。三者覆盖不同场景——JavaScript动态添加disabled属性、手动加disabled HTML属性、或仅加disabled类名（比如某些UI库封装后的行为）。只写一种选择器会漏掉部分按钮。
必须同时覆盖这三种情况，否则你在表单里用button.disabled手动禁用，或者用$('#btn').prop('disabled', true)动态设置，样式就可能不统一。
-
.btn:disabled—— 匹配原生disabled属性存在的<button></button>或<input type="button"> -
.btn.disabled—— 匹配显式添加disabled类的元素（Bootstrap自己也用它做状态同步） -
.btn[disabled]—— 匹配带disabled属性但未被浏览器解析为“真正禁用”的边缘情况（如自定义组件）
覆写透明度与光标时必须重置pointer-events
仅改opacity和cursor不够。Bootstrap 5默认给禁用按钮设了pointer-events: none，这意味着即使你把cursor改成default，鼠标悬停依然不会触发:hover，点击事件也完全被拦截——你的新光标根本不会显示。
所以必须显式重置pointer-events: auto，才能让cursor生效。但要注意：这会让按钮在视觉上“可点”，实际仍不可交互（因为disabled属性还在）。这是合理行为，否则用户会产生误操作预期。
示例覆写规则：
.btn:disabled,
.btn.disabled,
.btn[disabled] {
opacity: 0.65 !important;
cursor: default !important;
pointer-events: auto !important;
}
为什么!important在这里是必要且安全的
Bootstrap 5的禁用样式本身用了!important（比如opacity: .65 !important），而且它的CSS权重很高（.btn.btn-primary:disabled这类组合选择器）。不加!important，你的覆写大概率被忽略，尤其当引入顺序在Bootstrap CSS之后时。
这不是“滥用!important”，而是对抗框架级强制样式；只要限定在.btn范围内，不影响其他组件，风险可控。
- 不要写
*:disabled这种全局规则 - 不要只写
.disabled（没限定.btn，会污染.form-control.disabled等） - 确保你的CSS文件加载在Bootstrap CSS之后
深色模式下需额外处理filter: grayscale()
Bootstrap 5.3+在深色模式中对禁用按钮加了filter: grayscale(.5)，它会叠加在opacity之上，导致颜色进一步发灰发暗。如果你已覆写opacity但发现深色模式下按钮更难看清，大概率是这个filter在作祟。
解决方式是在同一组选择器里直接清除它：
.btn:disabled,
.btn.disabled,
.btn[disabled] {
opacity: 0.65 !important;
cursor: default !important;
pointer-events: auto !important;
filter: none !important; /* 关键：覆盖深色模式的grayscale */
}
这个filter不是所有项目都启用，取决于是否启用了Bootstrap深色模式支持（data-bs-theme="dark"或@media (prefers-color-scheme: dark)），但提前加上更稳妥。
最易被忽略的是pointer-events和filter这两项——它们不写，你调半天opacity和cursor都像没生效一样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
