css选择器之 :first-child / last-child

:first-child 

          单独使用这个选择器不带任何前缀，选择的是作为 “ 某个元素 ” 的 “ 第一个子元素 ” 的元素 ，某个元素是文档里的任意元素(即所有元素)，第一个子元素可以是任意的元素，要想明白这个子元素，很好的一个方式是使用jquery，在浏览器控制台使用 $(":last-child") 查看选择出来的元素就可以一目了然。

div:first-child

            理解了上面的  “ :last-child ” 选择器，这个就好理解了，这个选择器选择 “ 某个元素 ” 的第一个为div的子元素；这里的某个元素的也是文档里的任意元素

理解了以上选择器选择的元素就好办，现在就可以和其他选择器一起使用，使得定位更精确，比如

demo

选择 class为 mainmenu的元素 下面的最后一个li元素中的a元素

.mainmenu a:last-hild

解释：选择 .mainmenu下的  某个元素的  最后一个为a元素的  子元素；这里对.mainmenu使用的是后代选择器，所以他会循环的匹配.mainmenu的所有后代元素中第一个为a的子元素。关于 "后代元素" 和 "子元素" 的区别可以看W3C，以后就算遇到各种不同类型的组合选择器也可以按照以上的方式读代码

first-child W3C定义：

w3c定义

“ 选取属于其父元素的首个子元素的指定选择器 ”  这句话容易让人很含糊，谁是 “ 其 ”？ 谁是 “ 父元素 ”？难道这是翻译英文过来的句子吗？这么别扭的表达！我个人觉得这里的 “其父元素” 可以理解为 “文档中的某一个子元素”，那么上述定义就可以理解为

“ :first-child 是用于选取文档中某个元素的第一个子元素的选择器 ”

所以使用这两个选择器需要特别小心，因为他匹配的范围是整个文档！所以一般使用中都会配合其他的选择来一起使用，缩小选择范围。

那么能不能指定去选择某个元素的第一个或最后一个子元素呢？ 这个问题就个各自发挥吧！

注意：他选择的是子元素哦，而不是包含这个子元素的父元素；