Javascript 基于不同的元素属性更改元素上的CSS

我有一个元素，我想基于一个具有“checked”属性的不同元素来显示它。我正试图找到一种用纯CSS实现这一点的方法

有什么建议吗

这两个元素不是兄弟元素，也没有父子关系

这是我尝试过的，但似乎没有任何作用

#toolbar:checked ~ #filterToolbar {
    display:none;
}

#工具栏

是一个复选框，它应该显示或隐藏页面上的工具栏

这两个元素不是兄弟元素，也没有父子关系

如果这两个元素如您所指出的那样不相关，那么就没有CSS唯一的解决方案；您需要使用JavaScript（如果您想在客户端使用它）

例如，在文档末尾的脚本标记中，在结束标记之前：

(function() {
    var toolbar = document.getElementById("toolbar");
    var filterToolbar = document.getElementById("filterToolbar");
    function update() {
        if (toolbar.checked) {
            filterToolbar.style.display = "";     // Allows CSS default
        } else {
            filterToolbar.style.display = "none"; // Hides it
        }
    }
    update();
    toolbar.addEventListener("click", update, false);
})();

这个主题有上千种变体（我最初的答案使用了

querySelector

，但您现在指出两者都有ID），但这就是想法。

这就是所谓的，是的，这是非常可能的

但是，由于CSS中的限制，选中的元素必须位于要影响的元素之前，并且必须在相同的范围内或更低的范围内

这就是我的意思：

<style type="text/css">
    /* This doesn't work because d1 comes before the checkbox */
    #awesome-checkbox:checked ~ #d1 {
        opacity: 0;
    }

    /* This works because d2 is after and parallel the checkbox */
    #awesome-checkbox:checked ~ #d2 {
        background-color: #000;
    }

    /* This works because d3 comes after and below the checkbox */
    #awesome-checkbox:checked ~ #d3 {
        color: #999;
    }

    /* This doesn't work because d4 is outside the checkbox's scope */
    #awesome-checkbox:checked ~ #d4 {
        display: block;
    }
</style>
<main>
    <div id="d1"> Oh noes </div>
    <input id="awesome-checkbox type="checkbox"/>
    <div id="d2">
        <div id="d3"> Oh yeah </div>
    </div>
</main>
<footer>
    <div id="d4"> Oh noes </div>
</footer>

/*这不起作用，因为d1位于复选框之前*/
#真棒复选框：选中~#d1{
不透明度：0；
}
/*这是因为d2位于复选框之后并与复选框平行*/
#真棒复选框：选中~#d2{
背景色：#000；
}
/*这是因为d3位于复选框的后面和下面*/
#真棒复选框：选中~#d3{
颜色：#999；
}
/*这不起作用，因为d4超出了复选框的范围*/
#真棒复选框：选中~#d4{
显示：块；
}
哦，不
根据这两个元素在DOM中的相互关系，可以执行几种不同的操作。通过显示HTML来显示这种关系。（在询问如何使用X和Y元素时，始终显示您的结构。）
input:checked~.someElement{…}
更新了问题以包含关系。@qbolt请记住CSS不能向上遍历DOM，只能向下遍历。如果你想要一个真实的答案，请给我们一个真实的例子。@qbolt我们需要标记。标记决定是否可以将其作为目标。看看“这两个元素不是兄弟姐妹，也没有亲子关系。”（我的重点是）是的，我回答的时候没有，哈哈，但你完全正确，我只是没有费心删除答案。谢谢你提供的信息，它们彼此都不在范围之内。好的，非常感谢！关于复选框的另一个答案帮助我意识到它超出了范围，因此我别无选择，只能使用javascript。