:nth-child()
版本：CSS3
:nth-child(an+b)这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）
- 0n+3 或简单的 3 匹配第三个元素。
- 1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）
- 2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。
- 2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。
- 3n+4 匹配位置为 4、7、10、13...的元素。
a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合{an + b; n = 0, 1, 2,...}中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。
语法:
E :nth-child(n ){sRules}
匹配父元素中的第
:nth-child(an+b)这个CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例：
0n+3或简单的3匹配第三个元素。1n+0或简单的n匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本n和1n的匹配方式不一致。1n和1n+0是一致的，可根据喜好任选其一来使用。）2n+0或简单的2n匹配位置为 2、4、6、8...的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字even来替换此表达式。2n+1匹配位置为 1、3、5、7...的元素。你可以使用关键字odd来替换此表达式。3n+4匹配位置为 4、7、10、13...的元素。
a和b都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合{an + b; n = 0, 1, 2,...}中的子元素。另外需要特别注意的是，an必须写在b的前面，不能写成b+an的形式。
选择器示例
以<table>表格中的<tr>举例：
tr:nth-child(2n+1)：表示HTML表格中的奇数行。tr:nth-child(odd)：表示HTML表格中的奇数行。tr:nth-child(2n)：表示HTML表格中的偶数行。tr:nth-child(even)：表示HTML表格中的偶数行。
以<sapn>举例：
span:nth-child(0n+1)：表示子元素中第一个且为span的元素，与:first-child选择器作用相同。span:nth-child(1)：表示父元素中子元素为第一的并且名字为span的标签被选中。span:nth-child(-n+3)：匹配前三个子元素中的span元素。
浏览器支持
 |  |  |  |  |
IE9+以及新版浏览器都支持:nth-child() | ||||
例子
E:nth-child(n)匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效，但n 会继续递增。- 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是
<body>，即E可以是<body>的子元素 - 该选择符允许使用一个乘法因子(
n )来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成:E:nth-child(2n)
使用E:nth-child(n)实现奇偶:
因为(n)代表一个乘法因子，可以是0，1，2，3，...，所以(2n)换算出来会是偶数，而(2n+1)换算出来会是奇数
li:nth-child(2n){color:#f00;} /*偶数*/
li:nth-child(2n+1){color:blue;} /*奇数*/
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
- 列表项一
- 列表项二
- 列表项三
- 列表项四
使用odd，even实现奇偶:
关键字
li:nth-child(even){color:#f00;} /*偶数*/
li:nth-child(odd){color:blue;} /*奇数*/
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
- 列表项一
- 列表项二
- 列表项三
- 列表项四
注意
<p>第1个p</p>
<p>第2个p</p>
<span>第1个span</span>
<p>第3个p</p>
<span>第2个span</span>
<p>第4个p</p>
<p>第5个p</p>
p:nth-child(3){color:#f00;}
第三个<p>字体颜色不会是红色，因为第三个是<span>标签。p:nth-child(3)就不会命中任何一个元素。
第1个p
第2个p
第1个span第3个p
第2个span第4个p
第5个p
<p>第1个p</p>
<p>第2个p</p>
<span>第1个span</span>
<p>第3个p</p>
<span>第2个span</span>
<p>第4个p</p>
<p>第5个p</p>
p:nth-child(4){color:#f00;}
这时你以为会命中第4个p，但其实命中的却是第3个p，因为它是第4个子元素
第1个p
第2个p
第1个span第3个p
第2个span第4个p
第5个p
保险方式
假设不确定第1个子元素是否为E，但是又想命中第1个E，应该这样写:
p:first-of-type{color:#f00;}
//或者这样写:
p:nth-of-type(1){color:#f00;}
参考:first-of-type和:nth-of-type()
<h3><code>span:nth-child(2n+1)</code>, without an
<code><em></code> among the child elements.</h3>
<p>children 1, 3, 5, and 7 are selected.</p>
<div class="first">
<span>span 1!</span>
<span>span 2</span>
<span>span 3!</span>
<span>span 4</span>
<span>span 5!</span>
<span>span 6</span>
<span>span 7!</span>
</div>
<br>
<h3><code>span:nth-child(2n+1)</code>, with an
<code><em></code> among the child elements.</h3>
<p>children 1, 5, and 7 are selected.<br>
3 is used in the counting because it is a child, but it isn't
selected because it isn't a <code><span></code>.</p>
<div class="second">
<span>span!</span>
<span>span</span>
<em>this is an `em`.</em>
<span>span</span>
<span>span!</span>
<span>span</span>
<span>span!</span>
<span>span</span>
</div>
<br>
<h3><code>span:nth-of-type(2n+1)</code>, with an
<code><em></code> among the child elements.</h3>
<p>children 1, 4, 6, and 8 are selected.<br>
3 isn't used in the counting or selected because it is an <code><em></code>,
not a <code><span></code>, and <code>nth-of-type</code> only selects
children of that type. the <code><em></code> is completely skipped
over and ignored.</p>
<div class="third">
<span>span!</span>
<span>span</span>
<em>this is an `em`.</em>
<span>span!</span>
<span>span</span>
<span>span!</span>
<span>span</span>
<span>span!</span>
</div>
//CSS
span,
div em {
padding: 5px;
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;
}
span:nth-child(2n+1), without an <em> among the child elements.
children 1, 3, 5, and 7 are selected.
span:nth-child(2n+1), with an <em> among 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 <span>.
span:nth-of-type(2n+1), with an <em> among the child elements.
children 1, 4, 6, and 8 are selected.
3 isn't used in the counting or selected because it is an <em>, not a <span>, and nth-of-type only selects children of that type. the <em> is completely skipped over and ignored.