nth-子 CSS 选择器答案

【问题标题】：nth-Child CSS selectorsnth-子 CSS 选择器
【发布时间】：2018-12-28 05:18:00
【问题描述】：

我有九组配色方案，我想将它们应用于一系列 div。使用:nth-child(1), :nth-child(2)... 对前九个有效，但我希望在此之后重复该序列，并且我无法围绕 (3n+2) 表示法...我想我明白了，但我似乎无法哄它做我想做的事。

这可能吗，还是我应该在写出每个 div 时只为它们应用一个类？

【问题讨论】：

如果你想向后兼容，你应该使用类，因为 Internet Exploder 不支持nth-child。
您可以在quirksmode.org/css/contents.html 找到稍微过时的 CSS3 兼容性矩阵。如果您查看“nth-child”选择器，您会注意到 IE 领域的支持是粗略的。如果您真的想要/需要使用这些选择器并且不介意在您的应用程序中使用 javascript，您可以使用 jQuery 在 IE 中实现这些选择器
这是一个有趣的/爱好项目，所以我不太关心浏览器的向后兼容性，但更关心的是借此机会了解一些新的 CSS3 功能的工作原理。

标签： css css-selectors

【解决方案1】：

如果你的意思是你需要对每九个连续元素应用不同的规则，你必须使用这九个选择器：

:nth-child(9n+1)
:nth-child(9n+2)
:nth-child(9n+3)
:nth-child(9n+4)
:nth-child(9n+5)
:nth-child(9n+6)
:nth-child(9n+7)
:nth-child(9n+8)
:nth-child(9n+9) /* Or :nth-child(9n) */

【讨论】：

不应该以 :nth-child(9n+1) 开头，因为 CSS 选择器从索引 1 开始？
@Joe Landsman 你是对的，这样做会导致 :nth-child(9n) 直到第 10 个元素才被应用，而不是第一个元素。

【解决方案2】：

先说几个花絮：

nth-child 使用基于1 的索引进行匹配（即nth-child(1) 是第一个孩子，而不是第二个）
An + B 符号中的 n 是迭代器值
n 开始于 0 并向上计数
An + B 将是一个匹配的索引（我称之为i）

read the spec for more info

如果你有一组想要匹配的元素，你应该把它们写出来：

例子：

1st, 10th, 19th, 28th...

在这种情况下，您希望将 n 与特定索引匹配

n | i
======
0 |  1
1 | 10
2 | 19
3 | 28
4 | 37
etc...

如果我们使用n = 0、i = 1求解An + B = i，我们可以得到B的值：

A(0) + B = 1
B = 1

然后我们可以使用n = 1、i = 10 在第二次替换中使用这个值：

A(1) + 1 = 10;
A = 9;

所以我们现在有 9n + 1 用于匹配 1,10,19,28,etc 的选择器

您可以对每个不同的选择进行冲洗和重复，但很快您应该意识到重复发生在每个 A 元素，并且偏移量是 B 元素。

_{nth-child 选择器是高中代数实际有用}

的一个很好的真实示例

【讨论】：

非常详尽，谢谢！如果我在发布这个问题之前阅读的示例只是说The repetition happens every A elements, and the offset is B elements，我会马上理解的。