css active 和 focus 样式冲突怎么办_区分 active 与 focus 伪类

），: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。

立即学习“前端免费学习笔记（深入）”；

• 这是规范行为，不是 bug。W3C 明确 :active 对应“用户正在激活元素”，而非“元素处于活跃状态”
• 如果希望键盘操作也有类似反馈，不能靠 :active，得用 js 监听 keydown（如 Enter/Space）并切换自定义 class
• 切勿用 :focus:active 试图覆盖键盘场景——它在纯键盘操作中根本不会匹配

真正容易被忽略的是：可访问性要求你不能只靠 :active 提供操作反馈。键盘用户看不到“按下效果”，所以 :focus 的样式必须足够清晰，且与 :active 形成互补而非竞争。