: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等

值a和b必须都是整数，并且元素的第一个子元素的索引是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表格的奇数行。

tr:nth-child(odd)表示HTML表格的奇数行。

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

tr:nth-child(even)表示HTML表格的偶数行。

span:nth-child(0n+1)表示一个span元素，它是其父元素的第一个子元素; 这与:first-child选择器相同。span:nth-child(1)等同于以上。span:nth-child(-n+3)如果元素是其父项的前三个子项之一并且也是一个跨度，则匹配。

完整的例子

以下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;
}

...将导致：

规范

浏览器兼容性