在前端开发中，如何让一个按钮在被点击后改变颜色是一个常见的问题。今天，我们将探讨如何使用纯CSS（通过styled-components）来实现一个按钮在点击时改变颜色，然后再点击一次恢复原色的效果。基本原理我们将使用CSS的pointer-events和opacity属性来控制按钮的两个层级的子元素的显示和交互状态。以下是我们将要实现的步骤：设置两个可聚焦的子元素：这些子元素将分别控制按钮的两种状态（红和蓝）。使用CSS控制状态：通过改变子元素的opacity和pointer-events属性来实现颜色切换。实现步骤1. HTML结构首先，我们需要一个按钮，并在这个按钮内嵌套两个span元素，它们将作为按钮的两个层级。buttontype