:disabled伪类仅对原生表单元素生效，包括button、input、select、textarea、optgroup、option；div、span、label等非表单元素添加disabled属性无效，必须使用自定义class或确保disabled属性真实透传至合法DOM节点。

直接用 :disabled 伪类就行，但必须确保目标元素本身支持 disabled 属性，否则样式不生效。

哪些元素能被 :disabled 选中

只有原生表单控件才响应 :disabled：包括 <button></button>、<input>（所有 type）、<select></select>、<textarea></textarea>、<optgroup></optgroup>、<option></option>。这些元素加了 disabled 属性后，:disabled 才会匹配上。

常见无效场景：

• <div disabled> 或 <code><span disabled></span> —— 浏览器根本不认 disabled，:disabled 完全不会触发
• <label disabled></label> —— <label></label> 本身不支持 disabled，即使写了也白搭
• 包裹在 <fieldset disabled></fieldset> 里的子控件 —— 它们视觉上禁用了，但 DOM 上没写 disabled 属性，:disabled 选不到（得用 fieldset:disabled input 这类组合选择器）

:disabled 和 [disabled] 的区别

两者都能匹配带 disabled 属性的元素，但兼容性与语义不同：


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载

立即学习“前端免费学习笔记（深入）”；

• :disabled 是伪类，IE9+ 支持；它只匹配“真正被禁用”的状态（比如 JS 设置 el.disabled = true 后也会触发）
• [disabled] 是属性选择器，IE7+ 就支持；但它只看 HTML 中是否写了该属性，JS 动态设 el.disabled = true 却没写到 HTML 属性里时，它可能不匹配（尤其旧版 IE）
• 推荐优先用 :disabled，语义更准；若需兼容 IE8，改用 [disabled] 或同时写两个

自定义禁用样式要注意什么

浏览器默认会给 :disabled 元素加灰度和 cursor: not-allowed，但别依赖它：

• 显式重写 color、background-color、opacity 更可靠，避免被用户代理样式覆盖
• 别只靠 opacity: 0.5 模拟禁用 —— 它不影响可访问性，屏幕阅读器不会识别为“不可用”
• 如果用了 CSS 变量，记得在 :disabled 块里重新赋值，否则继承的变量可能让禁用态看起来和启用态一样
• <option disabled></option> 在部分浏览器（如 Safari）中无法用 CSS 修改文字颜色，这是限制，不是 bug

动态禁用后样式没更新？检查这几点

JS 设置 el.disabled = true 后，:disabled 样式没反应，大概率是下面几个原因：

• 元素还没插入 DOM 就设置了 .disabled —— 确保操作发生在 appendChild 或框架渲染完成之后
• 用了 el.setAttribute('disabled', '') 但没刷新渲染（极少数情况），改用 el.disabled = true 更稳
• CSS 优先级太高，比如写了 input:not(:disabled) { color: black; }，结果禁用后颜色还是黑的 —— 检查是否被更高权重要素覆盖
• Vue/React 中混用 disabled={bool} 和手动 DOM 操作，导致 React 的 diff 和真实 DOM 状态不一致

最稳妥的做法：始终用 .disabled 属性控制状态，CSS 只负责表现，不要试图用 class 模拟禁用逻辑。