原生 disabled 属性下 cursor: not-allowed 常不生效，因浏览器策略强制禁用 pointer events 导致 cursor 被静默丢弃；需显式添加 pointer-events: none 并确保样式权重足够。
原生 disabled 属性下 cursor: not-allowed 常不生效，不是你写错了，是浏览器策略压制 —— 必须显式加 pointer-events: none 并确保样式权重足够。
为什么 disabled 按钮鼠标还是箭头？
Bootstrap 默认对 [disabled] 和 .disabled 类设置了 cursor: not-allowed，但 Chrome/Firefox 等现代浏览器会忽略该声明：因为原生 disabled 属性强制禁用 pointer events，导致 cursor 样式被“静默丢弃”。这不是 Bug，是规范行为。
常见错误现象：
- 按钮加了
disabled，也写了cursor: not-allowed，悬停时鼠标仍是默认箭头 - 用 JS 动态设置
btn.disabled = true后，光标没变，但按钮确实点不动 - 覆盖 Bootstrap 的 CSS 时用了低优先级选择器（比如只写
.btn:disabled），结果被框架默认规则覆盖
怎么让 cursor: not-allowed 真正生效？
核心思路：绕过原生 disabled 对 cursor 的干扰，用类 + 显式声明组合控制。
- 放弃仅依赖
[disabled]控制光标，改用自定义禁用类（如.is-disabled） - 必须同时声明
pointer-events: none和cursor: not-allowed—— 缺一不可 - 提高 CSS 权重：用
.btn.is-disabled或.btn:is(.is-disabled)，避免被 Bootstrap 的.btn:disabled覆盖 - 若仍不生效，加
!important（临时调试可用，上线前建议优化选择器）
示例：
.btn.is-disabled {
pointer-events: none;
cursor: not-allowed;
opacity: .65;
}
用 pointer-events: none 时要注意什么？
它不只是“让按钮点不了”，会带来副作用，容易踩坑：
- 事件穿透：鼠标点击会落到父容器或下方元素上，可能意外触发其他逻辑
- 子元素失效：按钮里嵌的图标（如
<i class="bi bi-x"></i>）也点不动，即使单独给它设pointer-events: auto - 不影响键盘：
Enter/Space仍可触发 click，必须额外加tabindex="-1"并监听键盘事件拦截 - IE11 支持，但旧版 Safari 在表单控件上行为不一致，慎用于需强兼容的场景
真正要禁用按钮，优先用原生 disabled 属性
如果目标只是“不让用户点”，且不需要自定义光标行为，直接用 disabled 最稳妥：
- Bootstrap 会自动应用
opacity: .65、pointer-events: none、cursor: not-allowed和可访问性属性（aria-disabled="true"） - 表单提交时该按钮值会被忽略，
form.elements中也不包含它 - JS 动态控制必须操作 DOM 属性：
btn.disabled = true或btn.setAttribute('disabled', '')，不能只加 class
复杂点在于：禁用状态常需配合业务逻辑判断，而视觉反馈（光标+透明度）和行为控制（事件拦截+键盘支持）必须同步，漏掉任一环都可能造成体验断裂或可访问性问题。
