原生disabled属性导致cursor: not-allowed不生效，因Chrome/Firefox等浏览器强制禁用pointer-events，使cursor声明被忽略；必须配合pointer-events: none及高权重CSS（如.btn.is-disabled）显式控制。
原生 disabled 属性下 cursor: not-allowed 常不生效，不是你写错了，是浏览器策略性压制——必须显式加 pointer-events: none 并确保 CSS 权重足够。
为什么 disabled 按钮鼠标还是箭头？
Chrome/Firefox 等现代浏览器对原生 disabled 元素会强制关闭 pointer-events，导致所有 cursor 声明被静默丢弃。你看到的“箭头”，是浏览器 fallback 到默认光标，不是样式没加载，而是根本没机会应用。
- 写了
.btn:disabled { cursor: not-allowed !important; }，但悬停仍是default - JS 动态设
btn.disabled = true，按钮点不动了，光标却没变 - Bootstrap 5 默认规则是
button.btn:disabled，权重高于单纯:disabled，你的样式被覆盖
怎么让 cursor: not-allowed 真正生效？
核心是绕过原生 disabled 对 cursor 的干扰，用类 + 显式声明组合控制。
- 放弃仅依赖
[disabled]控制光标，改用自定义禁用类（如.is-disabled） - 必须同时声明
pointer-events: none和cursor: not-allowed——缺一不可 - 提高选择器权重：
.btn.is-disabled或.btn:is(.is-disabled)，避免被 Bootstrap 的.btn:disabled覆盖 - 临时调试可用
!important，上线前建议优化选择器而非滥用
.btn.is-disabled {
pointer-events: none;
cursor: not-allowed;
opacity: .65;
}
React/Vue/Angular 动态禁用时怎么处理？
框架绑定 disabled={true} 或 [disabled] 会直接写入原生属性，触发上面说的 cursor 失效问题。必须把逻辑从“属性绑定”转为“类名绑定”。
- Angular 示例：
<button class="btn btn-primary" [class.is-disabled]="user == null" (click)="login()">Login</button> - React/Vue 同理：用
className或控制类名，而非 disabled属性 - 保持
disabled属性绑定（保障表单语义和提交行为），再叠加类名接管样式——双保险
别踩 pointer-events: none 的坑
它不只是“让按钮点不了”，副作用很实际：
- 事件穿透：点击会落到父容器或下方元素，可能意外触发其他逻辑
- 子元素失效：按钮里的图标（如
<i class="bi bi-x"></i>）也点不动，即使单独给它设pointer-events: auto也不生效 - 不影响键盘：Enter/Space 仍可触发 click，必须额外加
tabindex="-1"并监听键盘事件拦截 - 旧版 Safari 在表单控件上行为不一致，慎用于需强兼容的场景
真正要禁用按钮，优先用原生 disabled 属性；只有当你需要精确控制光标样式且能接受这些副作用时，才用 pointer-events: none + 类名方案。
