21. CSS3 结构性伪类选择器 :nth-child(n)

:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数 n 的起始值始终是 1，而不是 0。也就是说，参数 n 的值为 0 时，选择器将选择不到任何匹配的元素。

经验与技巧：

当:nth-child(n)选择器中的 n 为一个表达式时，其中 n 是从 0 开始计算，当表达式的值为 0 或小于 0 的时候，不选择任何匹配的元素。如下表所示：

实例演示

通过:nth-child(n)选择器，并且参数使用表达式“2n”，将偶数行列表背景色设置为橙色。

HTML 代码：

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>​

CSS 代码：

ol > li:nth-child(2n){
  background: orange;
}

效果如下：