label点击之后改变背景颜色的不同方法

有多种方法可以实现点击 label 后改变其背景颜色，以下列举其中两种：

1. 使用 JavaScript 和 CSS：可以通过 JavaScript 给 label 添加点击事件，当点击时修改其 CSS 样式中的 background-color 属性。示例代码如下：

<label id="myLabel">点击我</label>

<script>
  // 获取 label 元素
  const label = document.getElementById("myLabel");

  // 给 label 添加点击事件
  label.addEventListener("click", function() {
    // 修改背景颜色为红色
    label.style.backgroundColor = "red";
  });
</script>

<style>
  /* 设置 label 的样式 */
  label {
    display: inline-block;
    padding: 10px;
    background-color: #ccc;
  }
</style>

2. 使用 CSS :target 伪类：可以利用 CSS 的 :target 伪类来实现点击 label 后改变其背景颜色。具体方法是在 label 的 href 属性中指定一个与 label id 相同的锚点，当点击 label 后会自动跳转到该锚点，此时可利用 :target 伪类修改 label 的样式。示例代码如下：

<label for="myInput"><a href="#myLabel" id="myInput">点击我</a></label>

<style>
  /* 设置 label 和 a 元素的样式 */
  label {
    display: inline-block;
    padding: 10px;
    background-color: #ccc;
  }
  a {
    text-decoration: none;
    color: #000;
  }

  /* 设置 :target 伪类的样式 */
  #myLabel:target {
    background-color: red;
  }
</style>