html和css中鼠标点击之后如何给盒子添加背景颜色

在HTML和CSS中，当用户鼠标点击某个元素时改变其背景颜色，通常涉及JavaScript、CSS伪类或者利用HTML5的`data-*`属性结合CSS。这里我们提供一种基本的方法：

1. **纯CSS**: 如果你想创建一个响应式的点击效果，可以使用CSS的`:active`伪类，它会在元素被激活（例如鼠标点击）时应用样式。比如:

<button class="click-box">点击我</button>

<style>
.click-box:active {
  background-color: red; /* 可以换成任何你喜欢的颜色 */
}
</style>

2. **JavaScript**:
使用JavaScript可以在事件处理程序中动态修改元素的样式。例如:

const button = document.querySelector('.click-box');
button.addEventListener('click', function() {
  this.style.backgroundColor = 'blue'; // 点击后背景变为蓝色
});

3. **HTML5 data-属性 + CSS**:
如果你不想使用JavaScript，也可以通过数据绑定的方式，首先设置一个`data-background`属性，并使用JavaScript或jQuery来监听点击事件更改背景:

<button class="click-box" data-background="yellow">点击我</button>

<style>
.click-box {
  transition: background-color 0.3s;
}

.click-box[data-background]:hover {
  background-color: var(--background-color); /* 初始颜色可以从data-属性获取 */
}

.click-box[data-background]:active {
  --background-color: red; /* 点击后的颜色 */
}

在这个例子中，需要预先定义好初始颜色并使用CSS变量。