Question

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

我想要做的是，如果选中了某个radio按钮，我想要降低几个级别并unhide覆盖，以便用户可以与已禁用的{{1}进行交互}按钮。

我知道你可以使用像radio和~这样的兄弟选择器来选择当前>的兄弟姐妹，但我如何选择div无线电的父元素按钮，然后遍历DOM以找到我想要的选择器？

我可以使用JS轻松完成此操作，但如果有可能，我会更喜欢CSS。

这是CodePen

您可以看到我有四个checked按钮。其中两个略微缩进。

我想要完成的是，如果有人选择 Testing2 radio，我希望将包含radio的{{1}}设置为{{1} }}

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

使用兄弟选择器对我来说相对较新，所以在这种情况下我可能没有正确使用它们。

我试过了：

.overlay

这是我的代码：

＆＃13;

opacity

＆＃13;

display: none

＆＃13;

Answer 1

如果从每个收音机/标签中删除容器，则只能使用（使用纯CSS）。此外，您应该考虑使用指针事件而不是叠加：

label:after { content: ""; display: block;}

.radio-group-2 {
  margin-left: 20px;
  opacity: .7;
  pointer-events: none;
}

input:checked + label + .radio-group-2 {
  opacity: 1;
  pointer-events: all;
}

<input type="radio" id="r-1" name="radio-group-1"><label for="r-1">Testing 1</label>
<input type="radio" id="r-2" name="radio-group-1"><label for="r-2">Testing 2</label>
<div class="radio-group-2">
  <input type="radio" id="r-3" name="radio-group-2"><label for="r-3">Testing 3</label>
  <input type="radio" id="r-4" name="radio-group-2"><label for="r-4">Testing 4</label>
</div>

请注意使用相邻的兄弟选择器。

Answer 2

鉴于你的情况

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

然后你的问题的答案，如果只有CSS可以这样做是否，因为CSS没有父选择器，如果你可以重新组织你的HTML，那么CSS将能够实现这个，通过使用相邻的选择器+或兄弟选择器~

您有关于question对css

中父选择器的更多信息

Answer 3

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

您需要将单选按钮元素放在DOM树的上方以实现此目的。

如何让它看起来像您想要的是将单选按钮放在树中更高的位置，但将标签保持在原位。然后制作单选按钮元素display:none，并将:before或:after伪元素添加到样式标签中，使其看起来像一个单选按钮。

类似的技术也用于创建纯CSS标签。

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

3 个答案: