CSS：焦点移除后如何保持样式

我们有一些按钮采用以下CSS样式：

.btn-outline-primary {
  color: blue;
  border: 1px solid blue;
  background: transparent;
  transition: all 0.3s ease 0s;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
      background: blue;
      border: 1px solid blue;
      color: white;
    }

---

但是，一旦单击按钮，然后在页面上的任何其他位置单击，样式将按预期消失。是否有一种方法可以使样式保持到单击另一个按钮为止

听起来，当用户单击按钮时，可能需要Javascript来添加或删除CSS类。

这可以在没有JS的情况下完成：

input[name='btn-focus']{
显示：无
}
.btn{
显示：内联块；
边缘：1米；
填充物：5em 1em；
颜色：蓝色；
边框：1px实心；
边界半径：.5em；
背景：透明；
转换：所有0.3秒到0秒；
}
.btn:悬停，
：选中+.btn{
背景：蓝色；
颜色：白色；
}

按钮1
按钮2

您将需要使用JSdarn…所以没有办法只使用CSS？AFAIK CSS无法记住状态和条件，但您可以轻松创建CSS类并使用JS有条件地应用