Html 仅使用CSS选择选中单选按钮的嵌套元素

我正在尝试使用CSS根据单选按钮状态选择一些元素

我想做的是，如果选中某个单选按钮，我想向下走几层，取消隐藏覆盖，以便用户可以与禁用的单选按钮交互

我知道您可以使用~and>等同级选择器来选择当前div的同级，但如何选择选中单选按钮的父元素，然后遍历DOM以找到所需的选择器

我可以很容易地用JS做到这一点，但如果可能的话，我更喜欢CSS

这是一个

你可以看到我有四个单选按钮。其中两个略微缩进

我想完成的是，如果有人选择Testing2收音机，我希望包含不透明度的.overlay设置为显示：无

我还需要在不重新组织HTML的情况下维护相同的结构

使用同级选择器对我来说是比较新的，所以在这种情况下，我可能没有正确地使用它们

我试过：

 #radio-1:checked ~ .overlay {
      display: none;
    }

    #radio-1:checked > .radio-bump > .radio-group-2 ~ .overlay {
      display: none;
    }

这是我的密码：

.覆盖{ 背景：fff； z指数：1； 位置：绝对位置； 排名：0； 底部：0； 右：0； 左：0； 不透明度：0.7； } .无线电-2组{ 位置：相对位置； } .无线电通气{ 左边距：20px； } 无线电-1：已选中~。覆盖{ 显示：无； } radio-1:选中>.radio bump>.radio-group-2~。覆盖{ 显示：无； } 测试1 测试2 测试3 测试4

---

不幸的是，使用当前的HTML树，在纯CSS中无法实现您在这里的要求。radio1不能与.radio bump位于同一选择器中

为了实现这一点，您需要将单选按钮元素放在DOM树的更高位置

你能做的就是把单选按钮放在树的更高位置，但把标签放在原来的位置。然后使单选按钮元素显示为：none，并将：before或：after伪元素添加到样式类似单选按钮的标签中

---

类似的技术也用于创建纯CSS选项卡。

只有从每个收音机/标签中移除容器，才能使用纯CSS。此外，您应该考虑使用指针事件而不是覆盖：

标签：在{内容：；显示：块；}之后 .无线电-2组{ 左边距：20px； 不透明度：.7； 指针事件：无； } 输入：选中+标签+.radio-group-2{ 不透明度：1； 指针事件：全部； } 测试1 测试2 测试3 测试4 考虑到你的情况

我还需要保持相同的结构，而不重新组织 HTML

那么你的问题的答案是，如果只使用CSS就可以做到这一点，那么答案是否定的，因为CSS没有父选择器，如果你可以重新组织你的HTML，那么CSS将能够通过使用相邻的选择器+或同级选择器来实现这一点~

---

你在CSS

中有更多关于父选择器的信息，也考虑输入：不：检查+标签+。无线电组2{Out不透明：7；指针事件：没有；}这是我第一次听说指针事件。我们没有在我的HTML5/CSS3课程中了解到它们。我刚才的研究表明，它们与SVG有关。冒着听起来像新手的风险，这在这里如何适用？谢谢