:hover 与 prefers-contrast: high 组合无效，因该查询仅表偏好且 Safari≤16.4 不支持；forced-colors: active 下需用语义色（如 ButtonFace）并确保媒体查询规则权重更高、位置靠后。
为什么不能用 :hover + @media (prefers-contrast: high) 组合
很多人试图写 @media (prefers-contrast: high) { button:hover { color: HighlightText; } }，结果发现悬停色根本没变——因为 prefers-contrast: high 只是“用户偏好”，不触发系统级颜色接管，:hover 仍走普通渲染流程，你写的 color 没被覆盖，但也没真正生效：它只是和默认色差太小，肉眼难辨。更关键的是，该媒体查询在 Safari ≤16.4 完全不支持，组合后整条规则静默失效。
@media (forced-colors: active) 里怎么安全用 :focus 和 :active
:focus 和 :active 在高对比模式下依然有效，但它们的样式必须适配系统语义色，否则会被强制重置。比如按钮按下时设 background-color: #005f87，系统会直接忽略；而写成 background-color: ButtonFace 才能保持视觉一致性。
- 焦点边框别只靠
outline：系统可能重映射 outline-color，建议加双层保障：outline: 2px solid Highlight; border: 1px solid ButtonText; -
:active状态慎用transform或opacity：这两者在forced-colors: active下常被浏览器降级或禁用，视觉反馈会消失 - 图标类
:hover或:focus切换 fill 颜色？SVG 必须显式加forced-color-adjust: none，否则 fill 会被强制转为 CanvasText，图标变灰不可读
伪类嵌套在 forced-colors 块里为何经常漏生效
最常见原因是选择器权重和声明位置冲突。比如你在全局写了 .btn:focus { outline: 2px solid #007bff; }，然后在 @media (forced-colors: active) 里写 .btn:focus { outline-color: Highlight; }，但后者因未提升特异性（比如没加 !important 或更具体选择器）被前者覆盖。系统不会“自动升级”旧规则，它只按 CSS 层叠顺序执行。
- 确保
@media (forced-colors: active)块放在整个 CSS 文件末尾，或包裹在@layer base内 - 避免用泛化选择器如
a:focus，改用带 class 的.link-primary:focus，便于在 forced-colors 块中精准覆盖 - 不要依赖继承：如果父元素设了
color: CanvasText，子元素.icon:focus还得单独声明fill: ButtonText，否则 SVG 仍按父级语义色渲染
移动端伪类 + forced-colors 的兼容陷阱
iOS Safari 直到 17.4+ 才支持 forced-colors: active，且必须同时开启三项设置：“增加对比度”+“降低透明度”+“使用灰度”，缺一不可。仅开“增加对比度”只会触发 prefers-contrast: high，:focus-visible 等伪类行为也不稳定。
立即学习“前端免费学习笔记（深入）”；
- Android Chrome 120+ 支持，但厂商定制系统（如 Samsung One UI）可能把开关藏在“辅助功能 > 可见性增强”里，路径不统一
- DevTools 的 “Emulate forced colors” 仅模拟媒体查询匹配，**不会触发伪类重绘逻辑**，比如
:active点击态不会真实激活，必须真机验证 - 触屏设备上
:hover基本无效，应优先保障:focus和:focus-visible，并用@media (hover: hover)隔离桌面端增强效果
!important 都拦不住。真正起作用的，永远是那几个无引号的语义关键字：ButtonFace、Highlight、ButtonText。 
