:disabled 伪类可直接选中所有原生禁用表单控件，仅响应 disabled 属性存在及真实禁用状态，不认 disabled="false" 或 JS 设置的 element.disabled = false；区别于 [disabled] 属性选择器，:disabled 实时反映交互状态，优先使用。
怎么用 :disabled 选中禁用的表单控件
直接写 :disabled 就行，它会匹配所有 disabled 属性为 true 的表单元素（<input>、<button>、<select>、<textarea> 等）。注意：只认 HTML 属性，不认 disabled="false" 或 JS 动态设置的 element.disabled = false 后的“反向状态”。
常见错误现象：button[disabled] 能生效，但有人误写成 button:disabled()（多加括号）或 :disable（拼错），结果样式完全不应用。
-
:disabled是伪类，不是函数，不能带括号 - 它只作用于原生支持
disabled属性的元素；自定义组件（如<my-input>）需手动加 class 或属性才能响应 - 和
:enabled是互斥关系，但不要依赖:enabled做默认样式——有些浏览器对它的支持略滞后
:disabled 和 [disabled] 有啥区别
视觉上通常没区别，但底层机制不同：:disabled 是伪类，由浏览器根据元素的 DOM 属性+内部禁用状态实时计算；[disabled] 是属性选择器，只看 HTML 中是否写了 disabled 这个属性，不管实际是否生效。
使用场景差异明显：JS 动态设置 el.disabled = true 时，:disabled 立刻匹配；而如果只改了属性 el.setAttribute('disabled', '')，两者都生效。但如果用 el.removeAttribute('disabled')，:disabled 马上失效，[disabled] 却可能还残留（比如服务端渲染后被 JS 清掉属性但没重绘）。
立即学习“前端免费学习笔记（深入）”；
- 优先用
:disabled—— 它反映真实交互状态 -
[disabled]适合调试：比如想确认某个元素是不是“硬编码写了 disabled”，可临时加背景色快速定位 - 在 Shadow DOM 中，
:disabled可穿透到内部控件，[disabled]不一定行（取决于封装方式）
为什么给 input:disabled 设背景色没反应
大概率是 CSS 优先级被更高权重的规则覆盖了，尤其是某些 UI 框架（如 Bootstrap、Element Plus）会给 input:disabled 写死 background-color 并加 !important。另一个常见原因是用了 appearance: none 后，部分浏览器（特别是 Safari）会忽略 :disabled 的部分样式继承。
- 检查 computed styles，看最终生效的
background-color来自哪条规则 - 避免用
!important硬顶，试试提高选择器权重：比如form input:disabled或.my-form input:disabled - 在 Safari 中，如果要确保禁用态背景可见，可以补一句
-webkit-text-fill-color: #999（防止文字变灰到看不见） - 别忘了禁用态的文字颜色也常被框架重置，单设背景不够，最好连
color和cursor一起配
React/Vue 里 :disabled 为啥有时失灵
不是伪类失灵，而是组件没把 disabled 属性透传到真实 DOM 节点上。比如 React 中写 <MyInput disabled />，但组件内部没把 props.disabled 传给底层 <input>，那 :disabled 根本没东西可选。
- Vue 组件要显式写
<input v-bind="$attrs">或手动绑定:disabled="disabled" - React 函数组件记得用
...restProps或明确解构disabled并传给原生节点 - 用 DevTools 检查真实 DOM 是否带
disabled属性，这是最直接的判断依据 - SSR 场景下，若禁用状态由客户端 JS 控制，首屏时
:disabled不会匹配——得靠 class 切换兜底
真正容易被忽略的是：禁用状态可能来自父级字段控制（比如整个 <fieldset disabled>），此时子元素即使没写 disabled 属性，也会表现为禁用，但 :disabled 选不到它们——这种得靠 fieldset:disabled > * 这类组合选择器来覆盖。
