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選擇器

回答

相關問題