单击时的 CSS 颜色 - CSS

在前端开发中，经常需要让用户在网页中进行一些交互操作，比如单击、鼠标悬停等。为了增强用户的交互体验，我们可以通过CSS来改变元素在用户交互时的表现效果。

CSS提供了一种伪类选择器:hover，可以在用户将鼠标悬停在元素上时应用特定的样式。类似的，如果需要在用户单击元素时应用特定的样式，可以使用伪类选择器:active。

:active 伪类

:active伪类选择器表示用户正在与一个元素交互，并且该元素处于激活状态。通常，该状态是在用户单击鼠标按钮或按下回车键时发生的。

在使用:active伪类选择器时，可以为元素指定任何CSS属性，如背景颜色、颜色、字体大小等。

a:active {
  background-color: gray;
  color: white;
  font-size: 16px;
}

上述CSS代码表示当用户单击链接时，链接的背景颜色将变成灰色，文字颜色变成白色，字体大小为16像素。

注意事项

• :active伪类选择器只在用户单击时处于活动状态，一旦鼠标按钮松开，该状态就会消失。所以，该状态的持续时间非常短，可能体验效果并不是很明显。
• :active伪类选择器必须与标签一起使用，因为只有链接才能被单击。

最后，需要注意的是，伪类选择器:active表示的是元素被鼠标点击时的状态。如果需要在元素被选中时改变样式，应该使用伪类选择器:focus。

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

上述CSS代码表示当用户在一个输入框中输入内容时，输入框的边框将变成蓝色。

参考资料：

• :active 伪类
• :focus 伪类