: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是伪类，IE9+ 支持；它只匹配“真正被禁用”的状态（比如 JS 设置el.disabled = true后也会触发） -
[disabled]是属性选择器，IE7+ 就支持；但它只看 HTML 中是否写了该属性，JS 动态设el.disabled = true却没写到 HTML 属性里时，它可能不匹配（尤其旧版 IE） - 推荐优先用
:disabled，语义更准；若需兼容 IE8，改用[disabled]或同时写两个 - 显式重写
color、background-color、opacity更可靠，避免被用户代理样式覆盖 - 别只靠
opacity: 0.5模拟禁用 —— 它不影响可访问性，屏幕阅读器不会识别为“不可用” - 如果用了 CSS 变量，记得在
:disabled块里重新赋值，否则继承的变量可能让禁用态看起来和启用态一样 -
<option disabled></option>在部分浏览器（如 Safari）中无法用 CSS 修改文字颜色，这是限制，不是 bug - 元素还没插入 DOM 就设置了
.disabled—— 确保操作发生在appendChild或框架渲染完成之后 - 用了
el.setAttribute('disabled', '')但没刷新渲染（极少数情况），改用el.disabled = true更稳 - CSS 优先级太高，比如写了
input:not(:disabled) { color: black; }，结果禁用后颜色还是黑的 —— 检查是否被更高权重要素覆盖 - Vue/React 中混用
disabled={bool}和手动 DOM 操作，导致 React 的 diff 和真实 DOM 状态不一致
:disabled 和 [disabled] 的区别
两者都能匹配带 disabled 属性的元素，但兼容性与语义不同：
自定义禁用样式要注意什么
浏览器默认会给 :disabled 元素加灰度和 cursor: not-allowed，但别依赖它：
动态禁用后样式没更新？检查这几点
JS 设置 el.disabled = true 后，:disabled 样式没反应，大概率是下面几个原因：
最稳妥的做法：始终用 .disabled 属性控制状态，CSS 只负责表现，不要试图用 class 模拟禁用逻辑。
