input:disabled不生效最常见原因是DOM未生成disabled属性，如框架未透传prop、type="hidden"被规范排除、JS仅设el.disabled=true未setAttribute、自定义控件不支持该伪类。
直接用 input:disabled 就能选中所有被禁用的原生输入框，但前提是它们真有 disabled 属性，且不是 type="hidden" 或自定义封装组件。
为什么 input:disabled 有时完全不生效
最常见原因不是写法错，而是 DOM 根本没生成 disabled 属性。比如：
- React/Vue 组件把
disabled当作 prop 处理，但没透传到底层<input>标签上 - 用了
<input type="hidden" disabled>—— 浏览器规范明确排除它，:disabled不匹配 - JS 只写了
el.disabled = true，却没调用el.setAttribute('disabled', '')，导致属性缺失 - 自定义控件如
<my-input>或 div 模拟的输入框，:disabled压根不认
input:disabled 和 input[disabled] 的实际区别
两者视觉效果常一样，但语义和触发机制不同：
-
input:disabled是语义伪类，只响应浏览器识别的“禁用状态”——比如 JS 设置el.disabled = true后样式立刻更新 -
input[disabled]是纯属性匹配，只要 HTML 字符串里写了disabled就生效，哪怕元素本身不支持禁用（如<div disabled>） - 日常开发优先用
input:disabled；只有在框架透传不可控、或需兼容 IE8+ 时才退回到[disabled]
给禁用输入框加样式时容易踩的坑
光写 opacity: 0.6 看似省事，但副作用明显：
立即学习“前端免费学习笔记（深入）”；
- 子元素（比如
<input>里的内联图标、background-image中的 SVG）也会变透明，文字可读性下降 - 禁用按钮必须加
cursor: not-allowed，否则用户无法感知“不可点” - 不要只靠
color和background-color区分状态——某些浅色主题下灰度不够，建议同步调低border-color和outline -
fieldset:disabled不会让内部input自动匹配input:disabled，得显式写fieldset:disabled input
真正可靠的写法是组合控制：确保属性存在、限定原生标签、分别降级颜色而非依赖 opacity，尤其注意框架组件是否把 disabled 渲染到了真实 DOM 上。
