应使用button:disabled而非[disabled]选择器，通过filter微调灰度与亮度、保留cursor: not-allowed并添加过渡、确保图标颜色同步、显式定义:focus:disabled焦点样式，兼顾可访问性与状态可预期性。
disabled按钮默认样式太难看，怎么用:disabled改得像真能点？
浏览器给button:disabled的默认样式就是灰+半透明+指针禁用，用户第一反应是“这东西坏了”，而不是“它暂时不可用”。关键不是让它“变好看”，而是传递「状态可预期」——比如保留边框、微调透明度、加文字提示感。
- 别直接
opacity: 0.5：会模糊文字，且对屏幕阅读器不友好（视觉降级 ≠ 语义降级） - 用
filter: grayscale(30%) brightness(0.95)比纯灰度更柔和，保留一点色彩识别度 - 必须保留
cursor: not-allowed，但可以加transition: all 0.15s ease让禁用/启用切换不突兀 - 如果按钮有图标，
svg元素要单独设fill: currentColor，否则color变化时图标颜色不同步
为什么button[disabled]和button:disabled选中效果不一样？
这是个经典混淆点：button[disabled]匹配所有带disabled属性的button，而button:disabled只匹配**当前被禁用状态**的按钮（包括JS动态设置disabled = true的）。实际项目里，后者才是你该用的。
- 服务端渲染或SSR页面中，
button[disabled]可能提前生效，但JS还没跑完，导致样式闪动 -
:disabled伪类支持所有表单控件（input、select等），写法统一 - 某些旧版Safari对
[disabled]属性选择器兼容性略好，但现代项目基本不用妥协
disabled按钮里的文字要不要加pointer-events: none？
完全没必要，还容易出问题。按钮本身已禁用，内部文字天然无法触发事件；强行加pointer-events: none反而会让部分屏幕阅读器跳过文本，破坏可访问性。
- 真正要处理的是点击穿透：如果按钮父容器有
pointer-events: none，子元素即使:disabled也会失效——这时该修父容器，不是给按钮打补丁 - 想防止误触？用
user-select: none禁用文字选中即可，不影响语义 - 移动端要注意：iOS Safari在
:disabled按钮上仍可能响应touchstart，加touch-action: manipulation更稳妥
Vue/React里动态禁用按钮，CSS没生效？检查这三点
框架里disabled属性常靠绑定变量控制，但样式失效往往不是CSS问题，而是DOM没更新或绑定方式不对。
立即学习“前端免费学习笔记（深入）”；
- Vue中用
:disabled="isLoading"是对的，但若写成disabled="{{ isLoading }}"（模板字符串误用），属性值变成字符串"true"而非布尔值，:disabled不匹配 - React中
disabled={isSubmitting}必须是布尔值，传字符串"true"会导致DOM属性存在但值为真，浏览器仍视为禁用，但CSS选择器可能失准 - SSR首屏渲染时，若服务端判断
disabled状态和客户端不一致，会出现样式闪烁——优先用useEffect或onMounted后同步状态
Tab到禁用按钮时，它依然能获得焦点（只是无法激活），所以:focus:disabled组合状态必须显式定义，否则会沿用默认焦点框，和灰度样式冲突。 
