CSS :focus 和 :active 的区别是什么

在本文中，我们将介绍 CSS 中 :focus 和 :active 伪类的区别。

阅读更多：CSS 教程

:focus 伪类

:focus 是 CSS 中的一个伪类选择器，用于选择当前获取焦点的元素。当用户通过点击或 tab 键将焦点放在可交互元素上时，该元素就会被 :focus 选择器选中。一般用于用户输入的表单元素，比如 input、textarea 等。:focus 用于设置元素获取焦点时的样式。

示例：

input:focus {
  border: 2px solid blue;
}

上面的示例中，当用户点击 input 元素并使其获取焦点时，输入框的边框将变为蓝色。

:active 伪类

:active 是 CSS 中的另一个伪类选择器，用于选择用户正在交互的元素。当用户按下鼠标左键去点击一个元素时，该元素就会被 :active 选择器选中。一般用于按钮或链接元素，用于设置用户点击时的样式。

示例：

.button:active {
  background-color: red;
}

上面的示例中，当用户按下按钮时，按钮的背景色将变为红色。

:focus 和 :active 的区别

:focus 和 :active 伪类的主要区别在于它们触发的时机和交互方式。

• :focus 是当元素获取焦点时触发，一般通过用户点击或 tab 键来实现。
• :active 是当用户点击一个元素并按住鼠标左键时触发。

也就是说，当用户点击一个元素但不松开鼠标左键时，会触发 :active，当用户松开鼠标左键并且元素还处于焦点状态时，会触发 :focus。

此外，:focus 和 :active 在样式的应用上也略有不同。:focus 一般用于设置元素获取焦点时的样式，比如改变边框颜色、增加阴影效果等。而 :active 一般用于设置用户交互时元素的样式，比如改变背景色、增加动画效果等。

总结

通过本文的介绍，我们了解了 CSS 中 :focus 和 :active 伪类的区别。:focus 是用来选择当前获取焦点的元素，一般用于用户输入的表单元素；而 :active 是用来选择用户正在交互的元素，一般用于按钮或链接等。两者的区别主要在于触发时机和应用样式的方式。在实际开发中，我们可以根据具体场景选择使用哪种伪类来实现我们想要的样式效果。