应通过组合选择器（如:focus:active）精准控制共存状态样式，明确区分按压态与聚焦态，并确保:focus有足够可访问性反馈。
active 和 focus 同时触发时，样式被覆盖怎么办
当用户点击一个可聚焦元素（如 用组合选择器显式定义不同状态的外观，避免依赖单一伪类覆盖。例如让按压态变暗、聚焦态加轮廓，且互不干扰： 文本输入框在获得焦点后，点击内部通常不会触发 完全正常。 立即学习“前端免费学习笔记（深入）”； 或带 tabindex 的 :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），因为焦点已存在，点击不视为“激活动作”，而是光标定位。这是浏览器对表单控件的特殊处理。
上绑定 mousedown 事件，会触发；但 :active 未必生效:focus-within 配合父容器，或监听 pointerdown 动态加 class 不依赖 :active 做交互反馈，改用 :focus + 过渡动画模拟“按下感”键盘操作下 :focus 有，但 :active 没触发，正常吗
:active 只响应**指针设备的主动按下动作**（mousedown / touchstart），而键盘导航（Tab）只触发 :focus，不触发 :active。
真正容易被忽略的是：可访问性要求你不能只靠 :active 对应“用户正在激活元素”，而非“元素处于活跃状态”:active，得用 JS 监听 keydown（如 Enter/Space）并切换自定义 class:focus:active 试图覆盖键盘场景——它在纯键盘操作中根本不会匹配:active 提供操作反馈。键盘用户看不到“按下效果”，所以 :focus 的样式必须足够清晰，且与 :active 形成互补而非竞争。
