使用 :checked 为页面上任何位置的元素切换 CSS？答案

【问题标题】：Using :checked to toggle CSS for an element anywhere on the page?使用 :checked 为页面上任何位置的元素切换 CSS？
【发布时间】：2012-10-12 13:58:07
【问题描述】：

我最近听说过一种方法，它使用复选框来设置与其相邻的元素的样式，使用：

.checkbox-whatever:checked + .toggling-element{
 Some css
}

现在我想做同样的事情，但将一段 css 应用于全局，而不仅仅是应用于下一个元素。所以基本上，当复选框被选中时，css 的行为就像是：

.toggling-element{
Some css
}

然后它将应用于所有具有“toggling-element”类的元素，而不仅仅是与复选框相邻的元素。

这可能吗？

【问题讨论】：

toggling 元素必须与可以使用 CSS 选择器表示的复选框有某种关系（无论多么复杂），因此它完全取决于您的结构。例如，如果切换元素位于复选框上方的某个位置，您将无法访问它。

【解决方案1】：

假设您的 .toggle-element 元素不是您的 .checkbox-whatever 的所有兄弟姐妹：

不，没有 JavaScript 就无法做到这一点，因为 CSS 无法选择父元素。

我认为假设您不会以这种方式构建标记是安全的；这太不切实际了。

【讨论】：