:disabled 是标准伪类，必须带冒号，仅匹配原生禁用表单元素（如button、input等），不匹配div等自定义元素；它反映运行时禁用状态，与[disabled]属性选择器行为不同，且disabled元素默认不可聚焦，影响:focus-within等伪类生效。
disabled 伪类不存在，要用 :disabled 伪类
CSS 中没有 :disabled 伪类这种写法——准确说，:disabled 是标准伪类，但很多人误以为它是“伪类名”而写成 disabled（漏掉冒号），导致样式完全不生效。它不是属性选择器，也不是类名，必须带冒号。
:disabled 能匹配哪些元素
它只对具有原生禁用语义的表单控件生效，包括： 被 禁用状态的样式控制看似简单，但容易混淆伪类写法、误判匹配范围、忽略 JS 动态操作带来的差异，还有 focus/hover 行为的隐性限制——这些细节不验证，光靠“写了样式”是看不出效果的。、（除 type="hidden" 外）、、、、。注意： 或自定义组件加 disabled 属性不会触发 :disabled，因为它们没有内置禁用逻辑。
→ ✅ 匹配
button:disabled
→ ✅ 匹配 input:disabled
xxx → ❌ 不匹配 div:disabled（无效） → ❌ type="hidden" 被排除在 :disabled 之外与 [disabled] 属性选择器的区别
:disabled 是伪类，反映元素当前是否处于禁用状态（含 JS 动态设置 el.disabled = true 后仍生效）；而 [disabled] 是属性选择器，只匹配显式写了 disabled 属性的 HTML 元素（哪怕后来 JS 清除了该属性，只要没重设 disabled，它还“挂着”就仍会命中）。两者行为不总一致。input:disabled {
background-color: #f0f0f0;
cursor: not-allowed;
}
/* 和下面效果不同： */
input[disabled] {
opacity: 0.6;
}
inp.disabled = true → 触发 :disabled，但不添加 disabled 属性，所以 [disabled] 不匹配 → 两者都匹配inp.removeAttribute('disabled') → [disabled] 立即失效，但若之前设过 disabled = true，DOM 属性可能残留（取决于浏览器），造成不一致常见坑：disabled 元素默认不可聚焦，:focus-within 不会触发
:disabled 选中的元素无法获得焦点，因此像 fieldset:disabled :focus-within 或 label:disabled:focus 这类组合基本无效。如果需要视觉反馈（比如禁用时 hover 变色），只能依赖父容器状态或 JS 模拟。
无法响应 :hover 或 :focus（部分浏览器允许 :hover，但不保证）fieldset:disabled 会禁用内部所有可交互子元素，但 fieldset 自身仍可被选中和设置样式button[disabled]:hover（仅当属性存在时），且需配合 pointer-events: none 的反向控制（慎用）
