伪类状态颜色需按特异性排序，优先写基础状态（:hover），再写组合状态（:hover:focus、:hover:active）；禁用态仅对表单元素生效，非表单元素应改用类名控制；:focus-visible 需配合 :focus 使用以兼顾鼠标与键盘操作；过渡应明确指定 color、background-color、border-color，避免 transition: all。
hover / focus / active 状态颜色怎么写才不冲突
多个伪类同时作用时，CSS 优先级不是按书写顺序叠加，而是看选择器特异性。比如 .btn:hover:active 和 .btn:active:hover 效果一样，但若单独写 .btn:hover 和 .btn:active，后写的会覆盖前写的——除非特异性更高。
实操建议：
- 把最具体的组合写在后面，比如先写
:hover，再写:hover:focus，最后写:hover:active - 避免用
!important堆叠状态，它会让调试变困难，尤其在组件复用时 - 移动端要注意
:active在 iOS Safari 中默认不触发，得加cursor: pointer或监听touchstart
disabled 状态的颜色为什么经常不生效
:disabled 是表单控件专属伪类，div、span 这类非表单元素加了 disabled 属性也不会触发该伪类——浏览器根本不认。
常见错误现象：
- 给
button写了button:disabled { color: #999; }，但颜色没变 → 检查是否漏了type="button"（某些老版 Firefox 对无 type 的 button 不识别 :disabled） - 用
pointer-events: none模拟禁用，但:disabled选择器完全不匹配 → 改用类名控制，比如.is-disabled - 颜色被父级
color继承覆盖 → 显式设置color、border-color、background-color，别只改一个
focus-visible 只在键盘操作时生效，怎么兼顾鼠标和键盘
:focus-visible 是为可访问性设计的，浏览器自动判断当前聚焦是否由键盘触发。但它不会在鼠标点击后出现，所以纯靠它做焦点反馈，用户会感觉“点一下没反应”。
使用场景：
- 需要保留
:focus兜底：写input:focus, input:focus-visible，但注意这样会让鼠标点击也显示焦点框 - 更稳妥的做法是用
:focus:not(:focus-visible)隐藏鼠标触发的焦点样式，只留键盘的 - 部分旧浏览器不支持
:focus-visible，可用 focus-visible polyfill，但要确保加载时机早于样式表
伪类链式调用时颜色过渡不平滑
从 :hover 到 :hover:active 如果只写了 transition: color .2s，而没声明 background-color 或 border-color，那这些属性会瞬间切换，破坏视觉连贯性。
性能与兼容性影响：
- 不要用
transition: all .2s，它会让所有可动画属性都参与过渡，包括height、opacity这些可能无意中被继承的属性 - 颜色过渡推荐用
transition: color .2s, background-color .2s, border-color .2s，明确列出 - 在 Safari 中，
transition对:disabled状态无效，只能靠 JS 控制 class 切换实现过渡
真正麻烦的是状态叠加顺序和浏览器默认行为差异，比如 :focus 在 Chrome 和 Firefox 中对 contenteditable 元素的触发逻辑就不一样。写的时候最好在目标环境里真机点一点，别光看 DevTools 模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
