CSS点击换样式——使用:active伪类

我们可以使用CSS中的:active伪类来实现点击元素切换样式的效果。当用户点击一个带有:active伪类的元素时，这个元素就会获得active状态，我们可以利用这个状态来改变元素的样式。
举个例子：

button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
button:active {
background-color: #3e8e41;
transform: translateY(2px);
}

这里有一个button元素，它有一个绿色的背景、白色的文字，当鼠标点击在这个按钮上时，这个按钮会获得active状态，并且会放大2像素。这里我们就是利用了:active伪类来完成这个效果的。

注意：:active伪类只有在点击元素的那一瞬间是生效的，在鼠标松开之后或者用户移开鼠标时就会失效。因此，如果我们想实现鼠标在元素上悬停时的效果，就不能使用:active伪类了，需要使用:hover伪类。