Html 更改：每次单击时激活样式

我正在尝试制作一个按钮，如下代码所示

---

在：活动状态下，按钮将其背景颜色从绿色更改为黄色。我想做的是在第二次（第二次单击）和第三次单击时，将背景颜色更改为蓝色。是否有一种方法仅使用css来实现这一点。正如您所见，它非常冗长，但从技术上讲，您可以仅使用CSS：

HTML:

演示： 这个想法很简单。如何在CSS中存储状态的选项不多。其中之一是使用checkboxe的

：checked

伪类和同级选择器

---

尽管可以用CSS完成，但我最好只使用几行javascript代码。

不，我认为这是不可能的，因为CSS无法跟踪点击次数。这需要JS。@Harry我是新来的选择器，我想知道像N个孩子之类的东西，或者你可以用focus或jquery之类的东西，这是最好的选择询问mate没有错。所以不要担心：）这是一个很难理解的问题，但你会明白：这很好。在你第一次在评论中解释之后，我有点期待。我也完全同意最后一句话。不必要地过度复杂化标记是不好的。@Harry，下面是我对你的想法所做的@Harry True，它根本不符合语义，效果也不值得努力。但还是很有趣，这是可能的。再次感谢你，我对你的回答做了很多。谢谢你的努力

button:active{
background-color:yellow;
}

<div class="btn-wrap">
    <input type="checkbox" class="check yellow" />
    <input type="checkbox" class="check blue" />
    <input type="checkbox" class="check red" />
    <button>Button</button>
</div>

.btn-wrap {
    position: relative;
    display: inline-block;
}
.btn-wrap .check {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.btn-wrap .check:checked {
    z-index: -1;
}

.btn-wrap button {
    width:100px;
    height:50px;
    background-color:green;
}

.btn-wrap .red:active ~ button {
    background-color: white;
}
.btn-wrap .red:checked ~ button:active {
    background-color: red;
}

.btn-wrap .blue:active ~ button {
    background-color: red;
}
.btn-wrap .blue:checked ~ button:active {
    background-color: blue;
}

.btn-wrap .yellow:active ~ button {
    background-color: blue;
}
.btn-wrap .yellow:checked ~ button:active {
    background-color: yellow;
}