根本原因是原生disabled属性强制禁用pointer-events，使浏览器忽略cursor声明；应改用高权重CSS覆盖或结合.disabled类+pointer-events:none显式控制。
为什么加了 disabled 属性，鼠标还是箭头？
根本原因不是 css 没写对，而是浏览器策略性压制：原生 disabled 属性会强制关闭 pointer-events，导致 cursor 声明被忽略（尤其 chrome/firefox）。你看到的“箭头”，其实是浏览器 fallback 到默认光标，不是你的样式没生效——它压根没机会生效。
常见错误现象：
- 写了
.btn:disabled { cursor: not-allowed !important; }，但悬停时仍是default - 用 JS 动态设
btn.disabled = true，视觉变灰了，光标却没变 - Bootstrap 5 文档里明确说支持
cursor: not-allowed，但实测不一致
button:disabled 选择器优先级不够怎么办？
Bootstrap 默认规则是 button.btn:disabled，权重比单纯写 :disabled 高。直接覆盖要写够 specificity，或者用 !important 快速兜底。
推荐写法（任选其一）：
button.btn:disabled { cursor: not-allowed !important; }-
.btn-primary:disabled, .btn-secondary:disabled { cursor: wait !important; }（按需区分类型） - 如果用了 Sass，直接在
$enable-important-utilities后重定义变量，全局统一
注意：!important 在这里不是偷懒，而是对抗 Bootstrap 内部高权重规则的合理手段；别只写 cursor 却漏掉 pointer-events: none，否则 Safari 可能仍显示箭头。
React/Vue 动态禁用时，disabled={true} 为啥光标失效？
框架绑定 disabled 属性本身没问题，但问题出在“何时写入 DOM”和“是否触发重绘”。某些场景下（比如条件渲染刚挂载、或受 shouldComponentUpdate 干扰），属性写入延迟，导致浏览器来不及应用 :disabled 样式。
更稳妥的做法是双保险：
- 保持
disabled={isDisabled}绑定（保障语义与表单行为） - 同步加类名控制视觉：
className={`btn ${isDisabled ? 'disabled' : ''}`} - CSS 中补上
.btn.disabled { pointer-events: none; cursor: not-allowed !important; }
这样即使 DOM 更新有延迟，类名也能立即接管样式；且 pointer-events: none 是释放 cursor 控制权的关键开关。
Bootstrap 5 下，.disabled 类还能用吗？
不能单独用。Bootstrap 5 已移除 .disabled 类的语义支持——它不再自动触发禁用逻辑，也不会加 pointer-events: none 或 opacity。你手动加 class="disabled"，按钮照样能点、能回车、能被屏幕阅读器读作“可用”。
正确姿势只有两个：
- 对原生支持
disabled的元素（<button></button>,<input type="button">），必须用disabled属性 - 对不支持的元素（如
<a></a>,<div role="button">），才用 <code>.disabled类 +pointer-events: none+tabindex="-1"+aria-disabled="true"最容易被忽略的是：JS 动态控制时，只改 class 不碰
disabled属性，会导致表单提交时该按钮值仍被序列化——后端收到不该有的空参。
