Css 选中：n子项时，选择对应的：n子项，子项不限

假设我有这样一个布局：

<input id="radio1" name="radio" type="radio" hidden>
<input id="radio2" name="radio" type="radio" hidden>
<input id="radio3" name="radio" type="radio" hidden>

<section>
  <label for="radio1">One</label>
  <label for="radio2">Two</label>
  <label for="radio3">Three</label>
</section>

但是如果有n个孩子呢？有人会认为你可以简单地使用：

:checked:nth-of-type(n) ~ section label:nth-of-type(n)

但这不起作用

是否可以在单个选择器中选择相应的子级，而不使用JS或更改HTML结构

是否可以在单个选择器中选择相应的子级 不使用JS或更改HTML结构

不可以。使用当前范围的CSS伪类是不可能的

但是，在假设的情况下，如果您可以更改HTML结构

。。。然后您可以利用下一个同级选择器+

工作示例：

：选中+标签{ 颜色：红色； 字体大小：粗体； } 标签，输入{ 位置：相对位置； 显示：内联块； 宽度：48px； 文本对齐：居中； 光标：指针； } 输入{ z指数：6； 不透明度：0； } 标签{ 左边距：-48px； } 一 二 三 四 五 六

---

不，不可能。更改HTML结构，将输入放在相应的标签之前，然后在CSS中使用input+label是最好的非JavaScript解决方案。Blazemonger是对的，但如果您确实无法更改HTML，您可以使用CSS预处理器生成规则，最大值为nI的某个合理值。尽管此示例过于简化，但nI无法更改结构，但我可以使用JS。我只是希望不必这么做。我误解了你的答案。你说，但如果你不能，但你可以，这就是为什么我投了反对票。我很清楚，通过改变结构，我可以创建一个选择器，支持您建议的n个收音机，但这样做，我无法同时将这些收音机用于其他组件。我最终使用了JavaScript，但希望得到一个纯CSS的解决方案，我很好奇今天的伪类是否可以实现这个解决方案。除非你调整你的答案，否则我无法删除否决票，但如果你这样做，我会删除它并将其标记为接受。非常感谢，@BenjaminSolum。对不起，我不能再帮你了。我认为在这样复杂的情况下，javascript确实是唯一的解决方案。很难想象哪怕是一个假设的CSS语法也能处理这个问题。一旦我们有了父元素组合符/选择器，我们就应该能够完成这件事情。仅限使用：如果您对增强型选择器感兴趣，请参阅axe选择器上的本页，以及axe刀片上的本页。axe是一项正在进行中的工作，我很少有时间去做，但它应该在2017年底之前基本准备好分发。

:checked:nth-of-type(n) ~ section label:nth-of-type(n)