可以使用 :nth-child 来选择 n 等于不同元素的 n 的元素吗？答案

【问题标题】：Can one use :nth-child to select elements where n is equal to n of a different element?可以使用 :nth-child 来选择 n 等于不同元素的 n 的元素吗？
【发布时间】：2021-04-15 03:52:09
【问题描述】：

是否可以编写 CSS 来选择元素，其中它们的 n 等于同一选择器中另一个元素的 n：

input:nth-child(1):checked ~ div > div:nth-child(1)
input:nth-child(2):checked ~ div > div:nth-child(2)
input:nth-child(3):checked ~ div > div:nth-child(3)
...
input:nth-child(n):checked ~ div > div:nth-child(n)

CSS 是否支持此功能，还是必须逐行写出所有内容？

【问题讨论】：

没有。您不能将第一个选中的 n 与第二个 n 关联起来
更新您的逻辑，将输入放在 div 旁边，您可以使用 + 而不是 ~ 然后考虑使用标签将 visual clickable 元素放置在您想要的位置

标签： css css-selectors

【解决方案1】：

选择器不支持任何类型的变量或反向引用，无论是属性选择器 (1 2) 还是功能性伪类，例如 :nth-child()。你也可以cannot use custom properties in selectors。

与上面前两个链接中的属性选择器一样，您可以使用预处理器自动执行此操作，但生成的 CSS 文件仍将包含所有可能性的硬编码列表。

【讨论】：