通过勾选checkbox修改CSS类display属性不生效的解决方法

• 你用的CSS兄弟选择器~存在匹配范围限制：只能选中位于当前元素后方、和当前元素同属一个父级的元素。你的复选框#test写在两个.reverse-flexbox容器之后，根本匹配不到前两个容器内的标题，只有复选框后面紧挨的那个h1在匹配范围内，所以达不到预期效果。
• 单页HTML内id属性值必须全局唯一，你给三个h1都设置了id="title"，不符合HTML规范，会导致样式匹配、DOM调用出现异常。

• 把复选框挪到所有需要被它控制的元素的最前面，保证它是所有待控制元素的前置同级节点，这样~选择器才能匹配到所有目标元素
• 把重复的id="title"替换为类名class="title"，对应CSS选择器同步改成类选择器，符合id唯一的规范
• 如果需要保留复选框原本的显示位置，不需要改动DOM展示顺序：可以把实际的复选框隐藏，搭配绑定了for属性的<label>标签放在你想要的位置做交互入口，点击label和点击复选框的效果完全一致。

修复后的可运行代码：

<body>
<style>
    #test:checked ~ div .title {
        display: none;
    }

    .reverse-flexbox {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    /* 隐藏真实的复选框，不占用页面布局位置 */
    #test {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
</style>
<div>
    <!-- 复选框放在所有待控制元素的最前方，保证选择器可以匹配到所有后续节点 -->
    <input type="checkbox" id="test" />
    <div class="reverse-flexbox">
        <h1 class="title">Just a text</h1>
        sky is blue
    </div>
    <div class="reverse-flexbox">
        <h1 class="title">Just a text</h1>
        i like stackoverflow
    </div>
    <!-- label放在原复选框的位置，点击即可触发勾选状态切换 -->
    <label for="test">
        <input type="checkbox" disabled />
        点我控制标题显示/隐藏
    </label>
    <h1 class="title">Just a text</h1>
    <div>Something else</div>
</div>
</body>
</html>

注：label里放了一个禁用的复选框是为了还原原生复选框的视觉样式，你也可以根据自己的需求自定义label的样式。

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