a css 点击后变色

在网页设计中，CSS 是非常重要的一部分，它不仅能够让网页变得美观，还能够增加网页的交互性。其中，点击后变色的效果是很常见的一种特效，下面就来介绍一下如何使用 CSS 来实现这个效果。

/* 定义一个类名为 click-style */
.click-style {
  color: #000; /* 设置字体颜色 */
  background-color: #fff; /* 设置背景颜色 */
  transition: .3s; /* 定义过渡动画效果 */
}

/* 当元素被点击后，加上 click-style 类 */
.element:active {
  /* 加上 click-style 样式 */
  @extend .click-style;
}

在上面的代码中，我们定义了一个 click-style 类，通过修改颜色和背景颜色来实现点击后变色的效果。同时，我们还定义了一个过渡动画效果，让变化更加流畅。

然后，我们针对需要变色的元素，使用 :active 伪类来控制其状态，通过 @extend 继承 click-style 类的样式，实现了点击后变色的效果。

需要注意的是，这里的 :active 伪类只能在鼠标点击时生效，当鼠标松开后便失效。如果需要使点击后一直保持变色状态，那么可以使用 JavaScript 来实现。

以上就是使用 CSS 实现点击后变色的基本方法，希望对大家有帮助。