按钮禁用时disabled属性没生效，主因是元素非原生可禁用控件（如div加disabled无效）或选择器不匹配（如对input写button:disabled），且未显式设置cursor: not-allowed、color等样式，或被高优先级规则覆盖。
按钮禁用时为什么 disabled 属性没生效？
常见错觉是：给 <button disabled></button> 加了 CSS，但点击区域仍可响应，或样式没变。根本原因常有两个：pointer-events: none 被手动覆盖，或用了 input[type="button"] 却只写了 button:disabled 选择器（它不匹配 input）。disabled 是原生属性，浏览器默认压制交互并降级样式，但一旦加了 pointer-events: auto 或用 JS 动态控制禁用逻辑（比如只加类名），就得靠 CSS 主动接管。
:not(:disabled) 和 :disabled 的选择器优先级陷阱
想让启用状态有 hover 效果、禁用状态灰掉且无手型，写成 button:not(:disabled):hover 看似合理，但容易被更具体的选择器覆盖。比如你同时写了 .btn-primary:hover 和 button:not(:disabled):hover，前者优先级更高，禁用按钮若带 .btn-primary 类，hover 仍会触发。
- 始终把
:disabled规则放在最后，确保它能覆盖前面的 hover/focus 样式 - 避免混用属性选择器和类选择器做状态控制；统一用
button:disabled或统一用.is-disabled类，别交叉 -
:not(:disabled)在旧版 Safari（:disabled
用 pointer-events: none 替代 disabled 的真实代价
有些场景不能改 HTML（比如第三方组件封装了 button 但没暴露 disabled prop），只能靠 class + pointer-events: none 模拟禁用。这确实能阻止点击，但带来三个隐性问题：
- 键盘用户无法
Tab到该按钮，pointer-events: none不影响tabindex，但焦点仍能进入，只是点不了——需额外加tabindex="-1" - 屏幕阅读器可能仍把它读作可操作元素，应同步加
aria-disabled="true" - 它不会触发
:focus或:active伪类，所以用pointer-events模拟时，禁用样式必须独立定义，不能依赖伪类链
一套可靠禁用样式的最小实践
兼顾语义、可访问性和视觉反馈，推荐这样写：
button:disabled,
button[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
background-color: #e0e0e0;
}
button:disabled:hover,
button[aria-disabled="true"]:hover {
/* 禁用状态下 hover 无效，这条可省略，但显式写出更防误覆盖 */
background-color: #e0e0e0;
}
/* 若用 class 模拟，务必同步处理键盘和读屏 */
button.is-disabled {
pointer-events: none;
opacity: 0.5;
cursor: not-allowed;
}
关键点在于：不要只信 pointer-events，禁用必须同时传递语义（disabled 或 aria-disabled）、视觉（opacity/cursor）、行为（pointer-events + tabindex）三层信号。否则在某些安卓 WebView 或老旧辅助工具里，按钮会变成“看不见却点得着”的幽灵元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
