button:disabled等伪类生效需满足三要素：DOM存在disabled属性、CSS正确匹配、行为层拦截交互；仅用class模拟禁用无效，须确保原生控件透传disabled属性并同步视觉与语义。
直接用 button:disabled、input:disabled 等规则写样式就行，但前提是元素必须是原生可禁用的表单控件，且 DOM 上真实存在 disabled 属性——否则样式根本不会生效。
为什么写了 button:disabled 却没反应
最常见原因是目标元素不是浏览器原生支持禁用语义的标签。比如：
- 用
<div disabled>或<span disabled>模拟按钮，:disabled完全不匹配 - React/Vue 组件里只传了
disabledprop，但没透传到内部<button>标签上 - JS 动态设置时用了
el.setAttribute('disabled', 'true')，而没用el.disabled = true（后者更可靠，且能触发样式重绘） - 样式被更高优先级规则覆盖，比如
.btn-primary:hover的权重压过了button:disabled
怎么写才真正生效且可用
确保三件事同步：DOM 层禁用、CSS 层反馈、行为层拦截。推荐写法：
- 视觉上叠加多个信号：
opacity: 0.6+cursor: not-allowed+background-color: #f0f0f0+color: #999 - 避免单独依赖
filter: grayscale()，老版 Safari 可能全黑；如需灰度，加 fallback：filter: grayscale(1) brightness(0.9) - 禁用态要移除交互残留：显式写
transition: none，否则悬停动画可能意外触发 - 测试时在 DevTools 里手动删掉
disabled属性，看样式是否立刻回退——这是验证伪类是否真在起作用的最快方式
框架里怎么安全控制禁用状态
React 和 Vue 都要求把 disabled 作为原生属性透传，不能只靠 class：
立即学习“前端免费学习笔记（深入）”；
- React 中写
<button disabled={isSubmitting}>，别写className={isSubmitting ? 'is-disabled' : ''} - Vue 中用
<button :disabled="isSubmitting">，而非:class="{ 'is-disabled': isSubmitting }" - 如果封装了自定义按钮组件，必须确保最终渲染出的是
<button disabled>，而不是仅在 wrapper 上加属性 - 禁用后仍能点？检查事件是否绑在父容器上，且 handler 开头没加
if (e.target.disabled) return
真正难的不是写样式，而是让禁用这件事从语义、视觉、行为三个层面完全对齐——漏掉任意一环，用户就会遇到“看着不能点，结果点了有反应”或者“读屏器说能操作，但实际点不动”的情况。
