CSS

:nth-child

:nth-child

:nth-child(an+b)CSS伪类匹配的是一个在它之前有an+b-1个同胞元素的元素,其中n为正或零。更简单地说,该选择器匹配在一系列兄弟节点中的数字位置与模式an + b匹配的元素。

/* Selects every fourth child element inside the body */ /* regardless of element type */ body :nth-child(4n) { background-color: lime; }

一些注意事项:

  • 0n+3,或者简单地3,与第三个元素匹配。

  • 1n+0或简单地说n,匹配每个元素。(兼容性提示:n在Android浏览器4.3及以下无法正常运行,而1n可以。1n等同于1n+0,使用时可自由选择。)

  • 2n+0,或者简单地说2n,匹配元素2,4,6,8等。您可以用关键字even替代这个表达式。

  • 2n+1匹配元素1,3,5,7等。您可以用关键字odd替代此表达式。

  • 3n+4 匹配元素4,7,10,13等

ab必须都是整数,并且元素的第一个子元素的索引是1.换句话说,这个类匹配索引落入集合{an + b; n = 0,1,2,...}中的元素。

语法

:nth-child( <nth> [ of <selector># ]? )where <nth> = <an-plus-b> | even | odd

实例

实例选择器

tr:nth-child(2n+1)表示HTML表格的奇数行。

完整的例子

以下HTML ...

<p><code>span:nth-child(2n+1)</code>, <em>without</em> an <code>&lt;em&gt;</code> inside the child elements. Children 1, 3, 5, and 7 are selected, as expected.</p> <div class="first"> <span>This span is selected!</span> <span>This span is not. :(</span> <span>What about this?</span> <span>And this one?</span> <span>Another example</span> <span>Yet another example</span> <span>Aaaaand another</span> </div> <p><code>span:nth-child(2n+1)</code>, <em>with</em> an <code>&lt;em&gt;</code> inside the child elements. Children 1, 5, and 7 are selected. 3 is used in the counting because it is a child, but it isn't selected because it isn't a <code>&lt;span&gt;</code>.</p> <div class="second"> <span>This span is selected!</span> <span>This span is not. :(</span> <em>This one is an em.</em> <span>What about this?</span> <span>And this one?</span> <span>Another example</span> <span>Yet another example</span> <span>Aaaaand another</span> </div> <p><code>span:nth-of-type(2n+1)</code>, <em>with</em> an <code>&lt;em&gt;</code> inside the child elements. Children 1, 4, 6, and 8 are selected. 3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>, not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects children of that type. The <code>&lt;em&gt;</code> is completely skipped over and ignored.</p> <div class="third"> <span>This span is selected!</span> <span>This span is not. :(</span> <em>This one is an em.</em> <span>What about this?</span> <span>And this one?</span> <span>Another example</span> <span>Yet another example</span> <span>Aaaaand another</span> </div>

...使用这个CSS ...

html { font-family: sans-serif; } span, div em { padding: 10px; border: 1px solid green; display: inline-block; margin-bottom: 3px; } .first span:nth-child(2n+1), .second span:nth-child(2n+1), .third span:nth-of-type(2n+1) { background-color: lime; }

...将导致:

规范

SpecificationStatusComment
Selectors Level 4The definition of ':nth-child' in that specification.Working DraftAdded of <selector> syntax and noted that matching elements are not required to have a parent.
Selectors Level 3The definition of ':nth-child' in that specification.RecommendationInitial definition

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1(Yes)3.5 (1.9.1)9.09.513.1
of <selector> syntaxNo support?No support2???
No parent required57?51 (51)3?44?

FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support(Yes)(Yes)(Yes)1.0 (1.9.1)29.09.513.1
of <selector> syntaxNo support??No support2???
No parent required5757?51.0 (51)3?44?