CSS点击后变颜色

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页样式的语言。它可以用来控制网页的布局、颜色、字体等方面的样式。在网页设计中，经常需要实现一个元素被点击后能够改变颜色的效果。本文将详细解释如何利用CSS实现点击后变颜色的效果。

一、理解CSS选择器

在修改元素样式之前，我们首先要了解CSS选择器的概念。CSS选择器是一种用于选择HTML元素的模式。通过选择器，我们可以定位并选择需要改变样式的元素。

常见的CSS选择器有：

元素选择器：选择指定的HTML元素。例如，p选择器将选择所有的段落元素。
类选择器：通过为HTML元素添加class属性，然后通过类选择器选择具有相同class属性值的元素。例如，.red选择器将选择所有class为red的元素。
ID选择器：通过为HTML元素添加id属性，然后通过ID选择器选择指定id属性值的元素。例如，#myElement选择器将选择id为myElement的元素。

二、利用伪类选择器实现点击后变颜色

在CSS中，伪类选择器可以用于选择处于特定状态的元素。例如，:hover伪类选择器可以选择鼠标悬停在元素上的状态，:active伪类选择器可以选择元素被激活时的状态。我们可以利用:active伪类选择器来实现点击后变颜色的效果。

1. HTML结构

首先我们需要一个HTML元素来实现点击后变颜色的效果。下面为例子中使用的HTML结构：

<div class="myDiv">点击我</div>

2. CSS样式

我们通过为.myDiv元素添加CSS样式来实现点击后变颜色的效果。具体的样式如下：

.myDiv:active {
  background-color: red;
}

在上述代码中，.myDiv:active表示选择class为myDiv的元素在被激活状态下的样式。我们将background-color属性设置为red，即可以在点击时将背景颜色改为红色。

3. 查看效果

将上述HTML结构和CSS样式放在一个HTML文件中，打开浏览器即可看到点击后变颜色的效果。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .myDiv:active {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="myDiv">点击我</div>
  </body>
</html>

在浏览器中打开该HTML文件，可以看到当点击”点击我”这个元素时，它的背景颜色会变为红色。

三、利用JavaScript实现点击后切换颜色

除了使用纯CSS来实现点击后变颜色的效果，我们还可以结合JavaScript来实现更灵活的效果。下面是使用JavaScript实现点击后切换颜色的方法。

1. HTML结构

同样，我们需要一个HTML元素来实现点击后变颜色的效果。下面为例子中使用的HTML结构：

<div id="myDiv" onclick="changeColor()">点击我</div>

在上述代码中，我们为被点击的元素添加了onclick属性，并将其值设置为changeColor()。这表示当该元素被点击时，会执行名为changeColor的JavaScript函数。

2. JavaScript函数

我们编写一个JavaScript函数来实现点击后切换颜色的效果。该函数通过改变元素的样式来实现颜色切换。具体的代码如下：

function changeColor() {
  var myDiv = document.getElementById("myDiv");
  if (myDiv.style.backgroundColor === "red") {
    myDiv.style.backgroundColor = "blue";
  } else {
    myDiv.style.backgroundColor = "red";
  }
}

在上述代码中，我们首先通过document.getElementById方法获取到id为myDiv的元素，并将其保存在一个变量中。然后，通过判断元素的backgroundColor属性是否为”red”，来判断当前颜色状态。如果元素的背景颜色为红色，则将其背景颜色改为蓝色，否则将其背景颜色改为红色。

3. 查看效果

将上述HTML结构和JavaScript函数放在一个HTML文件中，打开浏览器即可看到点击后切换颜色的效果。

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        background-color: red;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        cursor: pointer;
      }
    </style>
    <script>
      function changeColor() {
        var myDiv = document.getElementById("myDiv");
        if (myDiv.style.backgroundColor === "red") {
          myDiv.style.backgroundColor = "blue";
        } else {
          myDiv.style.backgroundColor = "red";
        }
      }
    </script>
  </head>
  <body>
    <div id="myDiv" onclick="changeColor()">点击我</div>
  </body>
</html>