使用mod（或模）運算符的第n個孩子

是否可以使用nth-child模？我知道你可以指定一個公式，如使用mod（或模）運算符的第n個孩子

nth-child(4n+2)

但我似乎無法找到是否有模運算符。我試過下面的例子下面，並沒有似乎工作：

nth-child(n%7) 
nth-child(n % 7) 
nth-child(n mod 7)

來源

2011-05-25 jefflunt

沒有，:nth-child()只支持加法，減法和coefficient multiplication。

我收集你試圖拿起前6個元素（因爲n mod 7任何正整數n只給你0到6）。對於這一點，你可以用這個公式來代替：

:nth-child(-n+6)

通過否定n，元素計數向後做從零開始，所以這些元素會被選中：

0 + 6 = 6 
-1 + 6 = 5 
-2 + 6 = 4 
-3 + 6 = 3 
-4 + 6 = 2 
-5 + 6 = 1 
...

jsFiddle demo

來源

2011-05-25 16:36:14 BoltClock

你靠近，[第n個孩子使用'1'基於指數（http://www.w3.org/TR/css3-selectors/# nth-child-pseudo），而不是「0」。你想要'-n + 7'。 – zzzzBov 2011-05-25 16:46:25

@zzzzBov：不，它從零開始編號「n」。「'：nth-child（an + b）'僞類表示法表示在文檔樹中的**之前具有'an' +'b'-1 siblings **的元素，對於任何正整數或零值'n'「它只說明第一個孩子的索引是1，這與'n'的索引無關。 – BoltClock 2011-05-25 16:48:01

我站好了。接得好;我記得這些元素是基於1的索引，並且假設n索引是相同的，但不重新閱讀文檔。 – zzzzBov 2011-05-25 16:55:09

如果你想使用nth-child模k，只需指定：

nth-child(kn)

例如，如果您想爲3，6，9指定樣式，...元素，只需指定（k = 3），並使用：

nth-child(3n)

您還可以指定偏移：

nth-child(kn+offset)

來源

2014-05-26 08:21:18 Athlan

我相信應該接受答案。這是我的問題肯定的答案。謝謝！在這裏學到了一課。 – Ben 2016-08-01 09:20:58

我知道這個話題很老了，但這裏的那是接近到足夠多模運算符答案：

:not(:nth-child(7n))

這將選擇的元件1-6，8-13等等...

:nth-child(an)

上面的代碼將選擇整除元件由「a」，因此增加：否（）選擇器力CSS選擇元素不可被「a」整除。

我希望有人會發現它有用;）

來源

2014-07-07 06:52:28 Silveraven

我沒有考慮到提問者可能意味着'n mod 7'匹配任何n不能被7整除的元素。這看起來更接近原始問題的要求，而不是我的回答，儘管我們仍然必須得到提問者的確認。 – BoltClock 2014-07-07 16:19:17

使用mod（或模）運算符的第n個孩子

回答

相關問題