:first-child和:first-of-type的区别（:first-child选择无效）

使用:first-child发现选择不起效，网上查了发现自己对:first-child和:first-of-type区别的认识不到。

:first-child   匹配父元素的第一个子元素E。

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

在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-child{sRules}，而不是ul:first-child{sRules}。

假设将代码简单地修改一下：

p:first-child{color:#f00;}

<div>
	<h2>我是一个标题</h2>
	<p>我是一个p</p>
</div>

只是在p前面加了一个h2标签，你会发现选择器失效了，没有命中p，why?

E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。

同理    :last-child（选择最后一个元素）

:first-of-type    匹配父元素下第一个类型为E的子元素。

需要注意3个要点：

• 首先，该选择符要匹配的是类型为E的子元素，这意味着E元素必须作为某个元素的子元素存在（E元素的父元素最高是html，也就是说E元素本身最高只能是body，这表示任何非html的元素都符合这个约束，因为html元素是根元素。）

• 其次，该选择符要匹配的是父元素第一个类型为E的子元素，这意味着被命中的元素不一定是父元素的第一个子元素（因为排在父元素首位的不一定是E元素，E元素可能在子元素列表中的任何位置）。

  <div class="demo">
  	<p>p1</p>
  	<p>p2</p>
  	<span>span1</span>
  	<p>p3</p>
  	<span>span2</span>
  </div>

       如上HTML，我们要命中父元素 .demo 的第一个 span 子元素，CSS 代码如下：

       .demo span:first-of-type { color: #f00; }

       此时 .demo 的第1个元素并没有被匹配到，而是匹配到了第3个子元素，因为第3个子元素正好是 .demo 的第1个span子元素

• 再次，只能匹配与E元素同级的元素，即：E元素的兄弟元素。来看下面这个例子：

<div class="demo">
	<span>span1</span>
	<p>
		<span>span2</span>
		<span>span3</span>
	</p>
	<span>span4</span>
</div>

     如上HTML，如果我想匹配其中的第1个span，代码如下：

      .demo span:first-of-type { color: #f00; }

     结果span1和span2都会被命中，因为span1和span2分属不同的父元素，并且都是其父元素的首个span元素，所以都会被命  中。

同理    :last-of-type（选择最后一个元素）

 

参考网址：http://css.doyoe.com/selectors/pseudo-classes/first-child.htm

                  http://css.doyoe.com/selectors/pseudo-classes/first-of-type.htm