Nth-Child CSS选择器

我有九套颜色方案，我想应用于一系列div。前9位使用:nth-child(1), :nth-child(2)...作品，但是我希望序列在那之后重复，并且我无法将头围绕（3n + 2）符号...我想我明白了，但是我可以'似乎哄它做我想做的事情。这是可能的，还是应该在每个div申请一个类时写出来？Nth-Child CSS选择器

谢谢！

来源

2011-08-26 Brad Westness

如果你想向后兼容，你应该使用类，如'第n-child' ISN” t支持Internet Exploder。 – zzzzBov

您可以在http://www.quirksmode.org/css/contents.html上找到稍微过时的CSS3兼容性矩阵。如果你查看'n-child'选择器，你会注意到在IE领域的支持是粗略的。如果你真的想要/需要使用这些选择器，并且不介意在你的应用程序中使用javascript，你可以使用jQuery在IE <9中实现这些选择器。 –

这是一个有趣/爱好项目，所以我不太关心浏览器的向后兼容性，但更多的是借此机会学习一些新的CSS3功能如何工作。 –

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

: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) */

来源

2011-08-26 14:56:09 BoltClock

啊，我明白了。现在看起来很明显。谢谢！ –

因为CSS选择器从索引1开始，所以不应该从第n个孩子（9n + 1）开始？ –

@Joe Landsman你是对的，这样做导致'：nth-child（9n）'不会被应用到第10个元素，而不是第一个元素。 –

首先几个花絮：

第n个孩子使用1基于匹配的索引（即nth-child(1)是第一个孩子，而不是第二个）
nAn + B表示法是迭代器值
n开始在0和计数了
An + B将匹配指数（我称之为i）

read the spec for more info

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

例子：

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

在你想使用n = 0匹配n具体指标

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

如果我们解决An + B = i这种情况下，i = 1我们可以得到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选择是哪里的高中代数真正有用的一个伟大的现实世界的例子}

来源

2011-08-26 15:17:40 zzzzBov

非常全面，谢谢！如果在发布这个问题之前我读过的例子只是简单地说'重复发生在每个A元素上，并且偏移量是B元素'，我会马上理解它。 –

Nth-Child CSS选择器

回答

相关问题