应通过组合选择器（如:focus:active）精准控制共存状态样式，明确区分按压态与聚焦态，并确保:focus有足够可访问性反馈。
active 和 focus 同时触发时，样式被覆盖怎么办
当用户点击一个可聚焦元素（如 <button></button> 或带 tabindex 的 <div>），<code>:active 和 :focus 很可能同时匹配。CSS 会按规则顺序应用样式，后声明的伪类会覆盖先声明的——这不是“冲突”，而是层叠逻辑在起作用。
- 浏览器默认行为：点击瞬间触发
:active（毫秒级），松开后若元素仍获得焦点，则保留:focus - 关键点：
:active是瞬态的，:focus是状态性的；二者可共存，但样式优先级只取决于 CSS 书写顺序和选择器权重 - 常见误判：以为“必须二选一”，实际应明确设计意图——是想强调“正在按压”？还是“当前已聚焦”？还是两者都要区分？
:active 和 :focus 样式需要视觉区分时怎么写
用组合选择器显式定义不同状态的外观，避免依赖单一伪类覆盖。例如让按压态变暗、聚焦态加轮廓，且互不干扰：
button {
background-color: #007bff;
outline: none;
}
button:focus {
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
button:active {
background-color: #0056b3;
}
button:focus:active {
background-color: #004085;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.35);
}
-
:focus:active比单独的:focus或:active权重更高，能精准控制“既聚焦又被按压”的状态 - 不要省略
outline: none后的替代方案（如box-shadow），否则移除原生焦点框会导致可访问性问题 - 移动端注意：
:active在 iOS Safari 中默认不触发，需加cursor: pointer或监听touchstart
为什么给 input[type="text"] 加 :active 没反应
文本输入框在获得焦点后，点击内部通常不会触发 :active（尤其 Chrome/Firefox），因为焦点已存在，点击不视为“激活动作”，而是光标定位。这是浏览器对表单控件的特殊处理。
- 验证方式：在
<input type="text">上绑定mousedown事件，会触发；但:active未必生效 - 替代方案：用
:focus-within配合父容器，或监听pointerdown动态加 class - 更稳妥的做法：对
<input>不依赖:active做交互反馈，改用:focus+ 过渡动画模拟“按下感”
键盘操作下 :focus 有，但 :active 没触发，正常吗
完全正常。:active 只响应**指针设备的主动按下动作**（mousedown / touchstart），而键盘导航（Tab）只触发 :focus，不触发 :active。
立即学习“前端免费学习笔记（深入）”；
- 这是规范行为，不是 bug。W3C 明确
:active对应“用户正在激活元素”，而非“元素处于活跃状态” - 如果希望键盘操作也有类似反馈，不能靠
:active，得用 JS 监听keydown（如 Enter/Space）并切换自定义 class - 切勿用
:focus:active试图覆盖键盘场景——它在纯键盘操作中根本不会匹配
:active 提供操作反馈。键盘用户看不到“按下效果”，所以 :focus 的样式必须足够清晰，且与 :active 形成互补而非竞争。
