Jquery 仅使用CSS更改选定元素的CSS样式

我有一个框，我想改变样式，比如当用户点击框时改变边框

我知道这可以通过JS或jQuery来完成，但这是否可以只使用CSS呢

我试着使用：focus和：active，当你点击时，它确实会改变样式，但在释放点击时，它会恢复CSS

这是我的密码：

CSS:

我创作小提琴也是为了尝试：

请建议

给你：

HTML

---

编辑：我最初删除它是因为有更好的答案。但我错了，它可以起作用。

CSS中有一个复选框技巧： 这可能是因为以下几点：

复选框被隐藏。 如果单击标签，则选中复选框。原因是for=toggle-1和id=toggle-1中的值相同 此声明输入[type=checkbox]：选中~.box{}与给定元素的同级元素匹配。 如果.box元素是输入的同级元素[type=checkbox]：选中，则它将与.box元素匹配 CSS:

HTML:

---

有关更多信息，请阅读此处：

您可以使用target，但需要创建链接

---

纯javascript有什么问题？不，不可能；这在JS或JQUERY中是可能的。这只有当你添加到HTML中，这样你才能在这样的文本输入中很好地工作，否则你可能会想用于任何div。这很公平，尽管它的语义非常令人不快。你能解释一下背后的原理吗？很有趣。我不知道for=something和id=something根据事件将元素绑定在一起。谢谢你的解释。

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    border:2px solid #ff0000;

}

.box:active, .box:focus {
    border: 2px solid #00afec;
}

<div id='clickme'><a href="#clickme">Click Me</a></div>

#clickme{
    width:100px;
    height:100px;
    border:2px solid #ff0000;
    text-align:center;
    line-height: 100px;
}

#clickme:target
{
    background-color: red;
}

.box, .label{
    width:100px;
    height:100px;
    border:2px solid #ff0000;
    text-align:center;
    line-height: 100px;
}
.label {
    position: absolute;
    display:block; 
    border:0;
}
#toggle-1 { display:none; }


/* Toggled State */
input[type=checkbox]:checked ~ .box {
   border: 2px solid #00afec;
}

<label for="toggle-1" class="label"></label>
<input type="checkbox" id="toggle-1">
<div class="box">Click ME!!</div>