button:disabled 样式未生效需确认元素为合法表单控件，检查 DOM 中 disabled 属性真实存在，显式设置 cursor: not-allowed，避免仅用 opacity，JS 用 el.disabled = true 而非 setAttribute，fieldset 需用 fieldset:disabled input 选择器。
button:disabled 样式没生效？先确认元素是否合法
只有原生表单控件才能响应 :disabled 伪类，比如 <button></button>、<input>（除 type="hidden"）、<select></select>、<textarea></textarea>、<fieldset></fieldset>。写成 <div disabled> 或自定义组件上加 <code>disabled 属性，CSS 完全不匹配——浏览器根本不识别那是“可禁用状态”。检查渲染后的 DOM，确保 disabled 属性真实出现在 <button></button> 或 <input> 标签上，而不是只在父 wrapper 或 React/Vue 组件 props 里。
button:disabled { cursor: not-allowed } 必须显式写
浏览器不会自动把禁用按钮的光标改成禁止符号，:disabled 只控制交互逻辑（如提交、聚焦），不改 cursor。漏掉这行，用户看到灰按钮却仍显示手型，会产生“能点”的错觉。
- 必须写
button:disabled { cursor: not-allowed; }，不能依赖全局重置或父级样式 - 旧版 Safari 对该规则支持不稳定，生产环境可加
!important（仅此一处合理） - 若同时用了
pointer-events: none，会阻止 focus/blur，键盘用户无法跳过，不符合无障碍要求
禁用态不是只调 opacity，要同步重置多个视觉通道
单靠 opacity: 0.6 是危险的：它不改变颜色对比度，高对比度模式下可能完全不可读；也不影响焦点框，键盘用户 Tab 过去时仍会亮起 :focus 样式。
- 显式设置
color和background-color，例如color: #999; background-color: #f5f5f5; - 叠加写
input:disabled:focus { outline: none; box-shadow: none; }消除焦点干扰 - 避免用
filter: grayscale()单独做灰化——Safari 旧版会全黑，且不改变鼠标指针和语义 - 测试时手动删掉 DOM 中的
disabled属性，看样式是否同步消失，验证是否真由该伪类控制
JS 动态禁用时，别用 setAttribute('disabled', '')
el.setAttribute('disabled', 'true') 虽然能让 :disabled 匹配，但语义不清；更稳妥的是直接操作 IDL 属性：el.disabled = true。后者确保 DOM 属性与 JS 属性同步，也兼容所有现代浏览器。
立即学习“前端免费学习笔记（深入）”；
- React 中避免
disabled={isLoading ? true : false}，直接写disabled={isLoading}，否则 falsy 值（如undefined）可能导致属性残留 - Vue 中用
v-bind:disabled="isDisabled"，并确认最终渲染的<button></button>上有该属性 - 如果用了
<fieldset disabled></fieldset>，子<input>不再带disabled属性，input:disabled不生效，得改用fieldset:disabled input后代选择器
disabled 或 aria-disabled="true"）、CSS 层（:disabled 或自定义 class）、行为层（事件 handler 开头加 if (el.disabled) return;）三者严格对齐。任何一环脱节，都会导致“看着不能点，结果点了有反应”或者“读屏器说能点，但点不动”。
