如何仅使用SCSS和HTML实现点击div后永久修改其背景色

仅通过HTML + SCSS 完全可以实现该需求，无需引入JavaScript

原理说明 #

你之前使用的:active伪类仅在鼠标按下的短暂时间内生效，松开鼠标后状态就会失效，因此无法持久保留样式。我们可以利用原生复选框的:checked持久状态，配合CSS选择器关联目标div实现需求：

• 点击操作会触发复选框的勾选状态，该状态会永久保留直到主动取消
• 通过CSS选择器匹配勾选状态，同步修改关联div的背景色

代码实现 #

修改后的HTML结构

<!-- 隐藏的复选框，用于存储点击状态 -->
<input type="checkbox" id="toggleDivBg" hidden>
<!-- label关联复选框，点击div等价于点击复选框 -->
<label for="toggleDivBg">
  <div class="div">
    <p>Hello</p>
  </div>
</label>

调整后的SCSS代码

.div {
  min-height: 50px;
  background-color: yellow;
  border-radius: 4px 4px 0 0;
  padding: 10px;
  display: flex;
  align-items: center;
  cursor: pointer; // 提示该区域可点击
}

/* 复选框勾选后，修改对应div的背景色为红色 */
#toggleDivBg:checked + label .div {
  background-color: red;
}

/* 如果需要点击后永久变红、禁止二次点击切换，可加下面这段代码 */
#toggleDivBg:checked + label {
  pointer-events: none;
}

内容的提问来源于stack exchange，提问作者WebDeveloper21