如何实现点击元素后CSS触发的样式保持生效不消失

这个需求可以实现，你当前使用的:active伪类仅在元素处于鼠标按下的激活状态时生效，鼠标松开后状态自动消失，因此无法实现样式持久保留。以下是两种常用的实现方案：

方案1：纯CSS实现（无需引入JavaScript） #

通过隐藏的checkbox控件结合相邻兄弟选择器实现点击状态持久化，代码示例如下：

HTML代码 #

<body>
  <!-- 隐藏的状态开关 -->
  <input type="checkbox" id="toggle">
  <label for="toggle">
    <p>Click me</p>
  </label>
</body>

CSS代码 #

/* 隐藏原生checkbox控件 */
#toggle {
  display: none;
}
/* checkbox被选中时，给目标p元素添加样式 */
#toggle:checked + label p {
  background-color: lightgreen;
}

该方案的原理是点击label标签会自动触发关联checkbox的选中状态，:checked伪类状态会一直保留直到用户再次点击取消，对应样式也会持续生效。

方案2：JavaScript实现（适配复杂业务场景） #

给目标元素绑定点击事件，点击后为元素新增预定义好样式的类名即可实现效果：

HTML代码 #

<body>
  <p id="elmt">Click me</p>
</body>

CSS代码 #

/* 预定义点击后生效的样式类 */
.clicked {
  background-color: lightgreen;
}

JavaScript代码 #

const targetEl = document.getElementById('elmt')
targetEl.addEventListener('click', () => {
  // 仅需首次点击生效用add方法，需要反复切换用toggle方法
  targetEl.classList.add('clicked')
})

如果需要实现页面刷新后样式依然保留的效果，可以将点击状态存储到localStorage中，页面初始化时读取存储状态给元素添加对应样式即可。

内容的提问来源于stack exchange，提问作者Tobias H.