必须同时写 button:disabled, button[disabled]，因 react/vue 动态禁用不写入 html 属性，ssr 或手动操作依赖 [disabled]，二者覆盖场景不同；仅写其一会导致后台管理系统中按钮禁用样式失效。
button:disabled 和 button[disabled] 必须同时写
后台管理系统里按钮禁用样式失效，90% 是只写了 button:disabled。React/Vue 组件传 disabled={true} 不等于 DOM 上真有 disabled 属性——很多 UI 库只是把值存在 props 里，没透传到内部 <button></button> 标签上。button:disabled 只匹配浏览器原生识别为禁用的元素；button[disabled] 只要 HTML 属性存在就生效，包括 SSR 渲染、JS 动态 el.setAttribute('disabled', '')、甚至自定义组件如 <mybutton disabled></mybutton>。
必须这样写：
button:disabled, button[disabled] {
background-color: #f5f5f5;
color: #999;
border-color: #ddd;
cursor: not-allowed;
}
扩展到其他控件也一样：input:disabled, input[disabled]、select:disabled, select[disabled]。
禁用样式不能只靠 opacity 或 filter
后台系统常在深色模式或高对比度环境下使用，单用 opacity: 0.6 或 filter: grayscale(100%) 会出问题：前者让文字对比度跌破 WCAG 4.5:1（尤其黑底白字时直接不可读），后者在 iOS Safari 旧版本可能渲染成全黑，且两者都不改鼠标指针、不屏蔽键盘焦点、不阻止屏幕阅读器播报“可点击”。
必须显式控制多个通道：
-
color和background-color要配对设灰阶值，别依赖背景透明露出父级颜色 - 一定要加
cursor: not-allowed，浏览器不会自动加 - 禁用时移除悬停残留：
transition: none - 避免
pointer-events: none——它会让 Tab 键跳过该元素，破坏键盘导航
:disabled 不支持 div/span/自定义组件
后台系统大量使用封装按钮（如 <antdbutton disabled></antdbutton>）或语义化容器（如 <div role="button" disabled>），这些元素即使带 <code>disabled 属性，:disabled 伪类完全不匹配。浏览器只认原生可禁用标签：button、input（除 type="hidden"）、select、textarea、fieldset。
正确做法是：
- 给自定义组件加 class +
aria-disabled="true"+tabindex="-1" - CSS 写成
.my-button[disabled], .my-button[aria-disabled="true"] - 禁用逻辑仍需在 JS 事件处理函数开头加判断，不能只靠样式挡操作
fieldset:disabled 下的子控件要单独选中
后台表单常用 <fieldset disabled></fieldset> 批量禁用一组控件，但注意：fieldset:disabled 本身能匹配，但它内部的 input、select 等**不会自动继承禁用状态样式**。浏览器只标记 fieldset 为禁用，子元素 DOM 上并无 disabled 属性。
要让子控件视觉同步，必须显式写：
fieldset:disabled input,
fieldset:disabled select,
fieldset:disabled textarea,
fieldset:disabled button {
background-color: #f5f5f5;
color: #999;
cursor: not-allowed;
}
更稳妥的做法是：禁用 fieldset 同时，用 JS 遍历子表单控件并设置 disabled 属性，再靠 input[disabled] 规则统一控制——否则 Safari 和部分安卓 WebView 会出现子控件样式不一致。
真正麻烦的点从来不在怎么写样式，而在于你是否确认过：DOM 中 disabled 属性真实存在、框架透传到底层原生标签、aria-disabled 和 tabindex 同步更新、事件拦截逻辑写全、各浏览器对 filter 和 accent-color 的兼容性兜底——漏掉任意一环，用户就会遇到“看着不能点，结果点了有反应”这种事。
