禁用按钮样式失效的根本原因是浏览器策略性压制原生 disabled 属性，而非选择器错误；应使用 pointer-events: none + 显式 cursor + 高权重选择器组合，并同步设置 aria-disabled 保证可访问性。
为什么直接写 button:disabled 样式常不生效
根本不是选择器写错了，而是浏览器对原生 disabled 属性有策略性压制：Chrome/Firefox 会直接忽略你写的 cursor，且默认文字色由 UA 样式接管，!important 都可能被覆盖。这不是 Bug，是规范行为。
真正起效的组合是：pointer-events: none + 显式 cursor + 足够权重的选择器。Bootstrap 5 默认在 button:disabled 里写了 pointer-events: none，但如果你用的是 CDN 加载、或旧版构建、或自定义打包漏掉了这条，就会失效。
- 只加
cursor: not-allowed不写pointer-events: none→ Safari/Edge 可能仍显示箭头 - 只写
.btn:disabled→ 权重不够，被 Bootstrap 的button.btn:disabled覆盖 - 用
input[type="button"]:disabled→ 这类元素不走.btn类，需单独覆盖背景、边框、文字色
怎么安全覆盖禁用按钮的 cursor 和文字色
别碰全局 :disabled，按按钮类型单独写，确保选择器 specificity 压过 Bootstrap 默认规则：
- 对主按钮：
.btn-primary:disabled { cursor: wait !important; color: #6c757d !important; } - 对所有按钮统一控制：
button.btn:disabled { cursor: not-allowed !important; color: #6c757d !important; } - 如果用了
.disabled类（比如框架动态绑定）：.btn.disabled { pointer-events: none; cursor: help !important; color: #6c757d !important; }
注意：#6c757d 是 Bootstrap 内置中灰，满足 WCAG 4.5:1 对比度要求；#999 在浅灰背景上常不达标。
移动端和旧 WebView 的兼容性补救
安卓旧版 WebView 对 :disabled 的 cursor 支持极差，光靠 CSS 不保险：
- 必须补行内样式：
<button class="btn" style="cursor: not-allowed;" disabled>提交</button> - 或者 JS 动态设置：
btn.style.cursor = 'not-allowed'（在设disabled = true后立即执行） - 避免对
fieldset:disabled或自定义组件粗暴套用同一套规则——它们语义不同，强行统一会破坏屏幕阅读器逻辑
最稳的路径：放弃依赖原生 disabled 控制视觉
原生 disabled 属性语义正确，但视觉控制不可靠；.disabled 类在 Bootstrap 5 中已被废弃，但用在 JS 控制场景下反而更可控。
推荐做法：用类名切换状态（如 [class.disabled]="loading"），配合以下 CSS：
.btn.disabled {
pointer-events: none;
opacity: .65;
cursor: wait !important;
color: #6c757d !important;
}
同时 JS 中同步操作：btn.disabled = true + btn.setAttribute('aria-disabled', 'true') —— 语义、行为、可访问性三者缺一不可，而视觉样式只是其中一环，最容易被忽略的恰恰是 aria-disabled 的同步更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
