应使用显式类名（如.is-disabled）替代:disabled伪类，配合opacity、pointer-events: none和cursor: not-allowed，确保禁用态样式可靠、可动画、跨浏览器一致，并避免仅依赖opacity导致的可读性与交互问题。
禁用按钮加半透明效果，直接用 :disabled 设置 opacity 不够可靠
因为 opacity 会把整个元素（包括子内容）一起变透明，且无法触发 pointer-events 的预期行为；更重要的是，部分浏览器（如旧版 Safari）对 :disabled 上的 opacity 渲染不一致，甚至忽略过渡动画。
:disabled + opacity 的常见失效场景
- 按钮内含图标或文字，
opacity: 0.5后文字也模糊，可读性下降 - 设置了
transition: opacity .2s，但禁用状态切换时无动画（disabled属性是 JS 直接赋值，不触发 CSS 状态过渡） - 使用
button[disabled]和button:disabled混用，后者在某些自定义组件中不匹配（比如 Vue/React 封装的按钮未真正透传disabled属性） - 表单重置后，
:disabled样式未及时恢复（尤其配合 JS 动态控制时）
更稳妥的写法：用 opacity + pointer-events: none + 显式类控制
绕过伪类依赖，改用显式类名（如 .is-disabled），既能精准控制样式，也便于 JS 控制和动画衔接：
.btn {
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.btn.is-disabled {
opacity: 0.45;
pointer-events: none;
cursor: not-allowed;
}JS 中只需同步增删类：
buttonEl.disabled = true;
buttonEl.classList.add('is-disabled');这样做的好处：
立即学习“前端免费学习笔记（深入）”；
- 避免浏览器对
:disabled的解析差异 - 可单独控制文字颜色、背景色、边框等，不被
opacity连带影响 - 过渡动画能正常触发（类名变更属于 CSSOM 变更）
- 与设计系统中的禁用态语义对齐（比如 Figma 组件库常以 class 区分）
如果坚持用 :disabled，至少加一层兜底
确保禁用态视觉足够明确，别只靠透明度：
button:disabled {
opacity: 0.5;
background-color: #e0e0e0;
color: #999;
border-color: #ccc;
cursor: not-allowed;
}
/* 防止 inline-style 覆盖 */
button[disabled] {
opacity: 0.5 !important;
}注意：!important 在这里不是偷懒，而是对抗内联样式（比如某些 UI 库在 JS 里设 style.opacity）。
禁用态的“半透明”本质是降低感知权重，但可读性和操作反馈不能妥协——最易被忽略的是：没同步关掉 pointer-events，导致按钮看起来禁用了，实际还能点中。
