必须同时写 button:disabled 和 button[disabled] 才能覆盖所有场景：前者匹配 JS 属性（如 React/Vue 动态禁用），后者匹配 HTML 属性（如 SSR 静态渲染），缺一则导致禁用按钮样式丢失。
button[disabled] 和 button:disabled 为什么都要写？
只写 button:disabled 在多数现代场景下能生效，但 React/Vue 动态设置 disabled={true} 时，DOM 的 disabled 属性（attribute）往往不写入 HTML，只更新 JS 属性（property），导致 button[disabled] 不匹配；而 SSR 渲染的静态 HTML 中又只有 disabled 属性、没有 JS 属性变更，:disabled 可能延迟响应或不触发。两者并列才能覆盖所有情况。
实操建议：
- 必须同时声明：
button:disabled, button[disabled]—— 不要省略任一选择器 - 避免用泛写
:disabled，它会意外匹配input或select，干扰按钮样式 - 若项目含服务端渲染（如 Next.js、Nuxt），漏掉
[disabled]会导致首屏禁用按钮无样式
为什么 button[disabled] 有时不生效？
button[disabled] 匹配的是 HTML 属性（attribute），不是 JS 属性（property）。当你用 JS 执行 btn.disabled = true，DOM 属性 disabled 并不会自动同步，浏览器也不强制补全。此时元素视觉上已禁用，但 [disabled] 选择器查不到该属性，样式就丢了。
常见触发场景：
立即学习“前端免费学习笔记（深入）”；
- 手写 JS 直接赋值：
el.disabled = true，没调用el.setAttribute('disabled', '') - 某些 UI 库封装组件（如 Ant Design Button）内部未透出
disabled属性到根节点 - 使用
innerHTML插入按钮时，属性解析失败或被过滤
验证方法：打开开发者工具，检查目标 button 元素是否真有 disabled="" 这个 attribute，而不仅是 disabled="true"（后者是无效写法）。
button[disabled] 的样式优先级容易被覆盖
button[disabled] 本身权重不高（10），很容易被带类名的选择器盖过，比如 .btn-primary:hover（权重 20）或 button.btn（权重 11）。结果就是按钮禁用后仍显示悬停色、阴影甚至动画。
解决办法：
- 提高选择器权重：用
.btn[disabled]或button.btn:disabled替代泛写的button[disabled] - 重置关键交互样式：显式写
transition: none、box-shadow: none、transform: none - 避免在
:hover规则里定义颜色/背景，否则禁用态可能继承悬停样式
非 button 元素加 disabled 属性，[disabled] 也无效
div[disabled]、span[disabled] 这类写法完全没用。HTML 规范中 disabled 是**表单控件专属布尔属性**，对 div 等非表单元素，浏览器直接忽略该 attribute，CSS 选择器自然无法匹配。
正确替代方案：
- 改用语义化标签：
<button>而非<div role="button"> - 若必须用非表单元素，手动切换 class：
btn--disabled，再写.btn--disabled样式 - 配合
aria-disabled="true"和tabindex="-1"，保障可访问性
真正难的不是写对选择器，而是确保 disabled 状态从数据层、DOM 层到样式层全程同步——尤其在混合渲染或自定义组件场景下，[disabled] 和 :disabled 各自失效的时机完全不同，漏掉一个，用户就看到“能点但点不动”的按钮。
