多个伪类连用顺序重要，因需满足“同时成立”的逻辑关系才能生效；连写无空格表“与”，逗号分隔表“或”；错误空格或忽略状态触发时机会导致匹配失败。
多个伪类连用时的顺序为什么重要
浏览器对 :hover、:focus、:active 等伪类的匹配是按声明顺序覆盖的，但更关键的是：**它们必须满足“同时成立”的逻辑关系才能生效**。比如 a:hover:focus 表示“既悬停又获得焦点”，而不是“悬停或聚焦”。很多人写成 a:hover, a:focus 本意是统一样式，结果误用了逗号导致变成两个独立规则，丢失了组合语义。
常见错误现象：button:hover:focus 写成 button:hover :focus（中间多空格），实际匹配的是 hover 状态下内部某个获得焦点的子元素，完全偏离目标。
- 多个伪类连写不加空格，表示“与”关系：
:hover:focus:enabled - 用逗号分隔是“或”关系，适用于统一基础样式：
:hover, :focus, :active -
:focus-visible和:focus共存时要注意优先级，前者仅在键盘触发焦点时生效，可用来避免鼠标悬停后意外触发焦点样式
如何让按钮同时响应鼠标悬停和键盘聚焦
真实场景中，既要支持鼠标用户（悬停提示），也要满足无障碍要求（键盘 tab 切换聚焦）。直接写 button:hover, button:focus 会导致鼠标悬停时也显示焦点环，视觉冗余。更合理的做法是区分触发方式：
button:hover {
background-color: #e0e0e0;
}
button:focus:not(:hover) {
outline: 2px solid #007bff;
}
button:focus-visible {
outline: 2px solid #007bff;
}
这样既保留悬停反馈，又确保键盘用户有明确焦点指示，且不会在鼠标操作时叠加 outline。
-
:focus-visible是现代方案，但需注意 Safari 旧版本兼容性，可配合@supports (focus-visible: auto)降级 - 不要用
outline: none全局移除焦点样式，这会破坏可访问性 - 如果需要“悬停即聚焦”的效果（如快捷菜单展开），应改用 JavaScript 控制
tabindex和aria-expanded，而非仅靠 CSS 伪类
状态组合失效的典型原因
写了 input:valid:focus 却没反应？不是语法错，而是浏览器只在表单控件失去焦点或输入变化后才更新 :valid 状态。也就是说，:valid:focus 在用户刚点击输入框时尚未满足 :valid 条件，自然不匹配。
类似情况还包括：:checked:hover 对于复选框，悬停本身不改变选中状态，所以只有已选中时悬停才生效；而 select:focus option:hover 根本无效——option 元素不支持 :hover（多数浏览器禁用）。
-
:disabled会阻止:hover和:focus触发，即使显式写了:disabled:hover也不会匹配 -
:target是 URL 片段标识符触发的状态，无法与:hover组合（无交集场景） - 动态添加的 class 或属性变更不会自动触发伪类重算，例如 JS 设置
element.value = ''不会立刻让:invalid生效，需触发 input/change 事件
用 :is() 简化多状态选择器
当需要为同一组状态写重复样式（比如所有可交互状态都加过渡），传统写法冗长：button:hover, button:focus, button:active, button:enabled。CSS :is() 可大幅简化：
button:is(:hover, :focus, :active, :enabled) {
transition: background-color 0.15s;
}
注意：:is() 不影响优先级，括号内任意一个伪类都会让整条规则生效；但它不支持在其中使用 :not() 嵌套（部分浏览器仍有限制），且 IE 完全不支持。
- 替代方案
:where()优先级为 0，适合覆盖默认样式，但同样不兼容 IE - 若需支持老浏览器，可用 PostCSS 插件自动展开
:is()，或手动维护多逗号列表 -
:is()不能解决状态逻辑冲突问题，比如button:is(:hover, :disabled)实际上永远不会匹配——因为:disabled元素不可能:hover
