1. 点击事件
在CSS中实现点击事件需要借助JavaScript，通过JavaScript来控制样式的改变。在JavaScript中，可以使用addEventListener()方法来为元素添加事件监听器，当事件被触发时，执行相应的操作。在本篇文章中，我们将使用点击事件来改变元素的颜色。
2. CSS选择器
在CSS中，通过选择器来选中某些元素，并为其应用样式。CSS选择器有多种，最常用的是元素选择器、类选择器、ID选择器和属性选择器。在本例中，我们将使用类选择器，即通过类名来选中元素。
3. 实现点击改变颜色
首先，在HTML文件中添加一个按钮元素：
<button onclick="changeColor()">点击改变颜色</button>上述代码定义了一个按钮元素，并添加了一个onclick事件监听器。当按钮被点击时，将调用changeColor()函数。
接下来，在CSS文件中定义一个类选择器，并指定其背景颜色：
.color{
background-color: red;
}
上述代码定义了一个类选择器“color”，并将其背景颜色设置为红色。
最后，在JavaScript文件中定义changeColor()函数，将指定元素的类名改为“color”：
function changeColor(){
document.getElementById("box").className = "color";
}
上述代码定义了一个changeColor()函数，将选择id为“box”的元素（在HTML文件中我们将实现此元素）的className属性改为“color”，即将其背景颜色改为红色。
4. 完整代码
将上述三段代码组合起来，形成完整的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击改变颜色</title>
<style>
.color{
background-color: red;
}
</style>
<script>
function changeColor(){
document.getElementById("box").className = "color";
}
</script>
</head>
<body>
<div id="box" style="width: 200px; height: 200px; border: 1px solid black;"></div>
<button onclick="changeColor()">点击改变颜色</button>
</body>
</html>
上述代码定义了一个id为“box”的div元素和一个按钮元素，当点击按钮时，将“box”元素的背景颜色改为红色。
小结
CSS中通过JavaScript实现点击事件，将元素的类名改为指定的类名，从而达到改变样式的目的。
此外，我们还可以使用其他选择器和样式来实现更丰富的效果，如:hover伪类和transition属性来实现鼠标悬停时渐变颜色的效果，或者使用javascript来控制元素的位置、大小等属性。