CSS3的first-child选择器实战攻略

1. <div>       <p>第1个元素</p>  
2.     <h1>第2个元素</h1>       <span>第3个元素</span>  
3.     <span>第4个元素</span>   </div>  

CSS选择器：
我们要查找其中的元素，如果使用下面的定义方法——
p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素；
h1:first-child  匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；
span:first-child  匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；
:first-child  匹配到的是p元素,因为在这里div的第一个子元素就是p。
上面应用的样式，有两个是匹配不到的，但是别慌张，CSS中还定义了:first-of-child伪类，请看他的用法和讲解：
p:first-of-type  匹配到的是p元素,因为p是div的所有为p的子元素中的第一个，事实上这里也只有一个为p的子元素；
h1:first-of-type  匹配到的是h1元素，因为h1是div的所有为h1的子元素中的第一个，事实上这里也只有一个为h1的子元素；
span:first-of-type  匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是第一个。
:first-of-type  匹配到的是p元素
总结：
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。