多个伪类可连续使用但顺序关键：:hover宜前置，:active仅瞬时生效，:visited受限于隐私，input需分层写状态，:disabled覆盖所有交互态，逻辑“或”须用逗号分隔。
多个伪类可以连续写，但顺序很重要
CSS 伪类组合不是随便堆叠的，:hover、:focus、:active、:visited 等连用时，浏览器按「特异性相同，后声明覆盖前声明」规则解析，但更关键的是用户交互流程本身有先后逻辑。比如 a:hover:focus 是合法的，表示「既悬停又获得焦点」；而 a:focus:hover 语义等价，但部分旧版 Safari 曾对顺序敏感，建议统一把 :hover 放前面。
-
:hover和:focus同时存在时，键盘 Tab 进入再悬停鼠标，两者都会生效 -
:active只在鼠标按下瞬间触发，无法和:hover长期共存，但可写成a:hover:active控制「悬停状态下被点击时」的样式 -
:visited只对<a>生效，且出于隐私限制，它能设置的样式极少（仅color、background-color等少数属性）
input 元素要同时响应 hover + focus + invalid，得拆开写
input 没法靠单条规则覆盖所有状态组合，因为 :hover:focus:invalid 这种链式写法虽语法正确，但实际中 :invalid 是动态计算的，且某些浏览器（如 Firefox）在输入过程中可能延迟触发，导致样式闪烁或不生效。更稳妥的方式是分层叠加：
input {
border: 1px solid #ccc;
}
input:hover {
border-color: #999;
}
input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0,123,191,.25);
}
input:invalid:focus {
border-color: #dc3545;
box-shadow: 0 0 0 2px rgba(220,53,69,.25);
}- 单独写
:invalid不加:focus会导致未聚焦时也显示错误边框，干扰用户预判 -
:focus-within可用于包裹input的父容器（如label或div），实现「子元素获得焦点时高亮整个区域」 - 不要依赖
:required:invalid做必填校验视觉反馈——它只在表单提交后才稳定触发，用户首次输入时不会激活
按钮的多状态样式容易漏掉 :disabled 的优先级
给按钮写 button:hover:active 很常见，但一旦加上 button:disabled，它的样式会覆盖所有其他状态，因为 :disabled 是一个独立的伪类，且浏览器默认赋予它更高权重（尤其在原生表单控件上）。所以必须显式重写禁用态下的所有交互样式：
button {
background: #007bff;
color: white;
}
button:hover {
background: #0056b3;
}
button:active {
transform: translateY(1px);
}
button:disabled {
background: #6c757d;
color: #fff;
cursor: not-allowed;
transform: none; /* 覆盖 :active 的 transform */
}-
:disabled不能和:hover同时生效（鼠标悬停在禁用按钮上不会触发:hover），所以不用写button:disabled:hover - 如果用了 CSS-in-JS 或框架（如 React），注意 JS 动态加
disabled属性时，样式是否及时更新——某些情况需强制重排或使用aria-disabled配合 - 移动端点击
button时，:active持续时间极短，建议配合touch-action: manipulation减少延迟
伪类组合不支持逻辑“或”，得用逗号分隔
CSS 没有 :hover || :focus 这种写法，也不能用 :is(:hover, :focus) 在所有场景下替代（IE 不支持 :is()，且部分老安卓 WebView 有兼容问题）。真要让「悬停或聚焦时都生效」，只能用逗号分隔多个选择器：
立即学习“前端免费学习笔记（深入）”；
a:hover,
a:focus {
text-decoration: underline;
}
/* 而不是 */
a:hover:focus { /* 这是“同时满足”，不是“任一满足” */ }- 逗号分隔的选择器组里，只要其中一个条件成立，整条规则就生效
- 若想复用样式块，可用 CSS 自定义属性提前定义，避免重复写
color、background等值 - 过度嵌套伪类（如
div:hover span:focus:active）会让选择器难以维护，也增加浏览器匹配开销，建议控制在 2–3 层以内
真实项目里最常被忽略的是：伪类生效依赖元素是否可交互。比如 div:hover 能工作，但 div:focus 默认不触发——必须加 tabindex="0" 才能让它接收焦点。这点在构建自定义组件时特别容易踩空。
