:nth-of-type(n) "n" 计数器是不是与同一 CSS 规则中的其他计数器独立递增？

Posted 2023-05-08

【中文标题】:nth-of-type(n) "n" 计数器是不是与同一 CSS 规则中的其他计数器独立递增？

【英文标题】：Do :nth-of-type(n) "n" counters increment independently with others in the same CSS rule?:nth-of-type(n) "n" 计数器是否与同一 CSS 规则中的其他计数器独立递增？

【发布时间】：2012-01-13 20:09:09

【问题描述】：

在 :nth-of-type() CSS 选择器中，n 个计数器是否相互独立递增？例如，如果我希望 label:checked:nth-of-type(3) 与它的一般同级 article:nth-of-type(3) 匹配，那么这种技术是否可行？ （它没有，但也许我只是想确定一下。）

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

这个想法是不必明确地说 :nth-of-type(1)、:nth-of-type(2) 等等。

【参考方案1】：

不幸的是，n 计数器位于定义它的 nth-of-type 的本地，因此您的技术将不起作用。你必须这样做：

label:checked:nth-of-type(1) ~ article:nth-of-type(1),
label:checked:nth-of-type(2) ~ article:nth-of-type(2),
label:checked:nth-of-type(3) ~ article:nth-of-type(3),
label:checked:nth-of-type(4) ~ article:nth-of-type(4),
label:checked:nth-of-type(5) ~ article:nth-of-type(5), ...

    /* definitions */

...这很痛苦。我知道你用它去哪里了，能用这样的东西真是太好了！