如何仅使用HTML和CSS实现激活一个元素后修改另一个元素的样式

可以仅使用HTML和CSS实现点击一个元素后改变另一个元素的样式，你给出的代码未生效有两个原因：一是:active伪类仅在鼠标按下未松开时生效，松开后状态就会重置；二是CSS选择器要求DOM结构符合层级匹配规则，a必须是目标div的祖先元素或前置兄弟元素才能匹配到。

下面是不同需求场景的实现方案：

场景1：点击后样式持续保持，再次点击可恢复 #

这是最常用的交互场景，用隐藏的checkbox + :checked伪类 + 兄弟/后代选择器实现：

示例代码 #

<!-- 隐藏的复选框，用于存储点击状态 -->
<input type="checkbox" id="toggle" style="display:none">
<!-- 触发点击的元素，通过for属性关联复选框 -->
<label for="toggle">点击我切换下方div的背景色</label>
<!-- 要修改样式的目标元素 -->
<div class="target">目标元素</div>

/* 复选框被选中时，修改后续兄弟元素.target的样式 */
#toggle:checked ~ .target {
    background-color: blue;
}

如果需要点击一次后样式就固定不再恢复，把type="checkbox"换成type="radio"即可。

场景2：点击后样式生效，点击页面其他区域自动恢复 #

如果不需要持久保持状态，仅在触发元素被选中时生效，可以用:focus伪类实现，需要给触发元素加上tabindex属性使其可以获得焦点：

示例代码 #

<div class="trigger" tabindex="0">点击我修改下方div样式（点击空白处恢复）</div>
<div class="target">目标元素</div>

.trigger:focus ~ .target {
    background-color: blue;
}

场景3：仅鼠标按下时生效，松开后恢复 #

如果你需要的就是你写的:active对应的临时生效效果，只要调整DOM结构符合选择器规则即可正常运行：

示例代码 #

<a href="javascript:;">按住我修改下方div样式</a>
<div class="target">目标元素</div>

a:active + .target {
    background-color: blue;
}

注意选择器的匹配规则：如果目标元素是触发元素的直接后续兄弟用+，是触发元素的任意后续兄弟用~，是触发元素的后代元素直接空格分隔写选择器即可。

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