:only-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 }

匹配父元素中的第 n 个子元素。参数是元素的索引。索引从1开始。 n 可以是一个数字，一个关键字，或者一个公式。

: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实现奇偶:

关键字 odd 代表奇数， even 代表偶数

li:nth-child(even){color:#f00;}  /*偶数*/
li:nth-child(odd){color:blue;}   /*奇数*/


<ul>
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
	<li>列表项四</li>
</ul>

列表项一
列表项二
列表项三
列表项四

注意

E :nth-child( n )会选择父元素的第 n 个子元素E，如果第 n 个子元素不是E，则是无效选择符，但 n 会递增。

<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> 字体颜色不会是红色， 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个子元素