按钮禁用时 cursor: not-allowed 不生效是因为浏览器对 <button disabled> 有更高优先级的默认样式覆盖，强制使用系统禁用光标并忽略自定义 cursor；可靠解法是改用 aria-disabled="true" 配合 CSS cursor: not-allowed 和 JS 事件拦截，兼顾语义、可访问性与样式控制。
按钮禁用时为什么 cursor: not-allowed 不生效？
直接给禁用按钮加 cursor: not-allowed 通常没用——因为浏览器对 <button disabled> 有默认样式覆盖，cursor 被忽略。这不是 CSS 写错了，而是 DOM 状态优先级更高。
-
disabled属性会让元素脱离交互流，部分浏览器（如 Chrome）会强制使用系统默认禁用光标，无视你写的cursor - 仅靠 HTML
disabled+ CSScursor组合，无法可靠触发not-allowed - 想让禁用态光标可控，必须绕过原生
disabled，改用aria-disabled="true"+ 手动拦截事件
用 aria-disabled 替代 disabled 实现可定制光标
这是最稳妥的解法：保持语义、支持键盘导航、又能完全控制样式。
- HTML 中移除
disabled，改用aria-disabled="true"和自定义 class，比如btn--disabled - CSS 中针对该 class 设置
cursor: not-allowed、opacity: 0.5、pointer-events: none - JS 中监听点击事件，检查
aria-disabled值，为true时return或preventDefault() - 别漏掉键盘交互：对
Enter和Space键也做同样拦截，否则屏幕阅读器用户仍可能误触
<button class="btn btn--disabled" aria-disabled="true">提交</button>
.btn--disabled {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
pointer-events: none 的副作用和替代方案
它会让整个元素“消失”在鼠标事件层，包括子元素——如果按钮里有图标或 tooltip，它们也会失效。
- 若需保留 tooltip 或内部 hover 效果，改用
pointer-events: auto配合 JS 拦截，而不是依赖 CSS 禁用 - 更细粒度的控制：只对按钮本体设
pointer-events: none，但给子元素（如<span>图标）显式设回pointer-events: auto - 注意 Safari 对
pointer-events在某些表单控件上的兼容性问题，老版本可能不支持
为什么不用 :disabled 伪类加 !important 强制光标？
有人试过写 button:disabled { cursor: not-allowed !important; }，但效果不稳定。
立即学习“前端免费学习笔记（深入）”；
-
!important在部分浏览器（尤其是旧 Edge）中仍会被原生禁用样式压制 - 即使光标变了，按钮的焦点状态（
:focus）、键盘可访问性（Tab 进入后无法 Escape）依然异常 - 无障碍测试工具（如 axe）会报错：缺少
aria-disabled，且disabled元素不应获得焦点 - 真正需要的是语义正确 + 行为可控，不是视觉上“看起来像禁用”
禁用态不只是光标变化，它牵扯到可访问性、事件流、焦点管理三个层面。随便加个 cursor 很容易漏掉其中一环。
