Html 使用非同级内容进行CSS复选框攻击

下面的CSS复选框hack假设内容是复选框的兄弟。单击标签时，将切换内容

切换内容
满足于此

#复选框{
显示：无；
}
#复选框：未（：选中）~.content{
显示：无；
}

只有当内容不是复选框的同级时，才能使用CSS实现相同的效果吗？例如：

切换内容
满足于此

您可以使用：target伪类，并使用锚点而不是复选框。丑陋的地狱，但CSS只：

a{
颜色：#000000；
文字装饰：无；
}
#关{
显示：无；
}
.内容{
显示：无；
}
#您的目标：target~.content{
显示：块；
}
#你的目标：瞄准{
显示：无；
}
#你的目标：瞄准目标{
显示：块；
}

这里的内容

如果没有JavaScript或可能是一些黑客的伪元素，就不可能出现。这可以概括为“如何根据复选框的选中状态设置任意元素的样式？”，这使得它重复了CSS选择器最常见的限制之一，或者更一般地说，答案是，这取决于您是否可以使用可用的组合器将这两个元素链接起来。例如，它可能不是复选框的同级，但也可能是复选框同级的后代。在引入CSS4父选择器之前，不能使用CSS。只有通过JS才能实现这一点。你现在也可以使用这个插件：@BoltClock谢谢你的链接。这可以通过问题中的布局（HTML的最后一点）来实现吗？@Misha Moroshko:否：没有父选择器，因此您无法从复选框的父元素中进行选择以到达其同级元素。