按钮禁用状态样式必须使用 :disabled 伪类，它仅对 button、input 等原生可禁用表单元素生效，不适用于 div 等自定义组件；避免使用 :not(:enabled)，慎用 opacity 和 pointer-events，应通过颜色、光标等视觉属性明确传达禁用状态。
按钮禁用状态样式必须用 :disabled 伪类
HTML 中 <button disabled></button> 或 <input type="button" disabled> 元素会触发浏览器原生的禁用逻辑，但默认样式很弱（比如只是变灰+失去焦点），要自定义视觉反馈，:disabled 是唯一可靠入口。它不依赖 JavaScript 状态，只响应 DOM 的 disabled 属性存在与否。
:disabled 只对可禁用元素生效
不是所有元素都能用 :disabled —— 它只适用于表单控件：
-
<button></button>、<input>（type为button/submit/reset/checkbox等） -
<select></select>、<textarea></textarea> -
<optgroup></optgroup>、<option></option>（部分浏览器支持）
<div> 或自定义组件加 <code>disabled 属性不会触发 :disabled，得改用类名（如 .btn--disabled）配合 JS 控制。
常见错误：用 :not(:enabled) 替代 :disabled
有些开发者想“取反”写法，但：
- :not(:enabled) 在多数浏览器中不被识别（:enabled 是有效伪类，但 :not() 里嵌套伪类兼容性差）
- 即使能解析，语义也不等价：:disabled 明确匹配 disabled 属性；:not(:enabled) 可能误捕获其他不可交互状态
- 实测 Safari 和旧版 Edge 对 :not(:enabled) 支持不稳定
正确写法就是直写：
button:disabled {
background-color: #ccc;
color: #666;
cursor: not-allowed;
opacity: 0.6;
}注意 opacity 和 pointer-events 的副作用
禁用样式常加 opacity，但要注意：
- opacity: 0.6 会让整个按钮（含子元素）变透明，可能影响可访问性（屏幕阅读器仍可聚焦，但视觉弱化过度）
- 不要加 pointer-events: none —— 它会阻止 :hover 等事件，且与原生 disabled 行为不一致（原生禁用按钮仍可获得焦点，只是不响应点击）
- 更稳妥的做法是保留 cursor: not-allowed + 调整颜色/背景，避免透明度干扰读屏体验
如果按钮内含图标或文字需不同处理，用属性选择器更可控：
立即学习“前端免费学习笔记（深入）”；
button:disabled svg {
fill: #999;
}
button:disabled span {
color: #555;
}禁用样式的真正难点不在写法，而在于「何时该禁用」——比如异步操作中，是点击瞬间禁用，还是请求返回后再禁用？这直接影响用户是否能重复提交。样式只是最后一层表达，背后的状态同步不能靠 CSS 解决。
