css伪类选择器之:first-child和:first-of-type

前不久使用伪类选择器的时候，发现有两组用法极为相似的，一组是:first-child、:last-child、:nth-child(n)，另一组是:first-of-type、:last-of-type、:nth-of-type(n)。谈一谈在使用中的“诡异”，以及两组伪类选择器的区别。

一、first-child“时灵时不灵”

以前对伪类选择器还不是很熟悉的时候，有时候会发现:first-child、:last-child“时灵时不灵”，真是急死老夫了。具体以前写的代码找不到了，找了两端差不多的学习学习：

<style>
	p:nth-child(3){color:#f00;}
	p:nth-child(4){color:#0f0;}
</style>
<div>
	<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>
</div>

那么问题来了：

p:nth-child(3){color:#f00;} 这是会命中第3个p么？如果你这么认为那就错了，这条选择符就不会命中任何一个元素。

p:nth-child(4){color:#f00;} 这时你以为会命中第4个p，但其实命中的却是第3个p，因为它是第4个子元素。

二、两组伪类选择器的区别：

针对上面出现的诡异事件，做出如下解答：

1. E:first-child { sRules } 匹配父元素的第一个子元素E。
2. E:last-child { sRules } 匹配父元素的最后一个子元素E。
3. E:nth-child(n) { sRules } 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。

这三个伪类选择器，注意看“child”，是第几个子元素，肯定是相对于父级、相对于兄弟元素来说的，同级即可。

另外一组：

1. E:first-of-type { sRules } 匹配同类型中的第一个同级兄弟元素E。
2. E:last-of-type { sRules } 匹配同类型中的最后一个同级兄弟元素E。
3. E:nth-of-type(n) { sRules } 匹配同类型中的第n个同级兄弟元素E。

这三个伪类选择器，注意看“type”，是第几个同类型元素，不仅仅满足同级，排序数字n还要是相同的元素。

三、进阶：

<style>
li:nth-child(even){color:#f00;} /* 偶数 */
li:nth-child(odd){color:#000;} /* 奇数 */
</style>
<ul>
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
	<li>列表项四</li>
</ul>

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

<style>
li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
</style>
<ul>
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
	<li>列表项四</li>
</ul>

关键字2n+1代表奇数，2n代表偶数。自己慢慢体会