disabled元素仍可触发focus/blur事件，需用input:disabled:focus重置焦点样式；:enabled无法响应JS动态禁用；fieldset disabled使子元素无disabled属性，需用后代选择器或class控制；高对比度模式下应使用GrayText等系统关键词确保可访问性。
disabled 伪类不触发点击事件，但能响应 focus/blur
很多人以为加了 :disabled 就彻底“失效”，其实不然：它只是禁用表单控件的交互逻辑（比如提交、输入），但元素本身仍可被聚焦（尤其在键盘导航时），focus 和 blur 事件照常触发。这会导致视觉反馈错乱——比如你用 :focus 给边框加高亮，禁用状态下按 Tab 键过去，依然会亮。
- 真实场景常见于管理后台的批量操作按钮组，某按钮临时
disabled，但用户仍可通过键盘切换到它 - 修复方式不是删掉
:focus样式，而是叠加写：input:disabled:focus { outline: none; box-shadow: none; } - 注意 Safari 对
:disabled:focus支持较晚（iOS 15.4+ 才稳定），旧版本需用input[disabled]:focus兜底
enabled 伪类不能用于禁用元素的“反向样式”
:enabled 看似是 :disabled 的镜像，但它只匹配“本可以启用”的元素——也就是说，如果一个 input 没有 disabled 属性，哪怕它被 JavaScript 动态设为 disabled = true，:enabled 依然生效。真正的问题在于：它无法感知运行时状态变化。
- 典型错误：写
button:enabled { opacity: 1; } button:disabled { opacity: 0.5; }，结果 JS 动态禁用后，样式没更新 - 原因：浏览器只在解析 HTML 或属性变更时重新计算伪类，而
element.disabled = true不触发属性变更（它是 IDL 属性，非 content attribute） - 可靠做法是手动同步：JS 禁用时同时加 class，如
btn.classList.add('is-disabled')，然后用.is-disabled控制样式
fieldset disabled 影响整个子树，但子元素的 :disabled 不再匹配
给 fieldset 加 disabled，它内部所有表单控件都会变灰、不可交互——这是标准行为。但很多人没意识到：此时子元素（如 input）自身并不带 disabled 属性，因此 input:disabled 选择器完全不生效。
- 现象：你写了
input:disabled { background: #eee; }，但 fieldset 禁用后，input 背景没变 - 解决方法只有两种：一是用
fieldset:disabled input这类后代选择器；二是放弃伪类，统一用 class 控制（更可控） - 性能提示：嵌套过深的
fieldset:disabled input[type="text"]在低配设备上可能触发重排，建议限制层级 ≤2
disabled 样式在高对比度模式下容易失效
Windows 高对比度模式或 macOS 的“增加对比度”开启后，浏览器会强制覆盖部分 CSS，包括 background-color 和 border。这意味着你精心写的 input:disabled { background: #f5f5f5; color: #999; } 可能全被系统主题接管。
立即学习“前端免费学习笔记（深入）”；
- 验证方式：在 Windows 设置 → 辅助功能 → 高对比度 中开启，看禁用态是否还能区分
- 关键补救：必须显式设置
color和border-color，且避免用opacity（它会被忽略） - 更稳妥的写法：
input:disabled { color: GrayText; border-color: ButtonShadow; }—— 这些是系统关键词，浏览器会映射到当前主题的实际颜色
最麻烦的其实是组合态：比如一个 button 同时有 disabled、:hover、又在 fieldset 里，还开了高对比度。这时候伪类优先级、系统覆盖、JS 同步时机全得对齐，漏一环就出视觉断层。
