旁白：

　　好久没写博客了，很多原因，各种忙碌，没时间。有学习的时间已经很不错了，哪来的写博客的时间。

当然，这些都是借口，真正的原因大概还是没有养成写博客的习惯吧，如果有人看到我的博客，而你也是一个刚刚加入博客的程序员，请@我一起努力！

　　今天又看了看jQuery手册，为什么要看手册呢，因为好久没用jQuery突然想写个简单的选择器结果几次报错，尴尬！以前所谓的学习jQuery只是听了几节视频课，做了一下随堂联系，后来又学习其他的东西，以至于jQuery都忘的差不多了，这里提醒和我一样的初学者jQuery还是要经常用的，手册也是要温习的。

说重点：温习jQuery手册时看到了选择器这节，怎么都看不懂 first-child和first-of-type 们了

正文：

说说first-child和first-of-type 们 那些事

　　为什么会疑惑：

1 
     
       2             
      
John
 3             
      
Karl
 4             
      
Brandon
 5         
     
 6         
     
       7             
      
Glen
 8             
      
Tane
 9             
      
Ralph
10 
     
11 

　　怎么弄，怎么感觉这两个的结果是一样的。

　　疑惑，弄不明白，看看手册。

 

 

　　看了半天，也没有看出个所以然，再看看下面的例子，也没有找到解决的办法。

　　咋整！

　　后面又是一大堆:nth-child   :nth-of-type,:nth-last-child  :nth-last-of-type   之流

　　看来今天不搞清of-type这点事，不是一个选择器有问题，而是这类选择器都搞不清楚啊

　　然后连滚带爬的看完好几个这样的例子。

　　终于，让我找到了一个例子。

 

1 
     
        2      
      John   3      
      Kim  4      
      Adam  5      
      Rafael  6      
      Oleg 7 
     
 8 
     
        9      
      Dave 10      
      Ann11      
     
12 
     
       13      
      Maurice  14      
      Richard 15      
      Ralph 16      
      Jason17 
     
18 

　　怎么看，怎么觉得这个例子和其他的例子不同。

　　再翻到前面看看，前面的选择器的例子，都用什么<ul>里面包<li>或者<div>里面包<span>

　　燃鹅，这个例子

　　它里面是乱的，从这里开始，我开始理解这些这个of-type的用法了。

　　

1 <--html如上-->2 3 4 

 

 

 　　我看到了这样的一个结果，和我预想的结果不一样啊 

　　

　　然后我又写了如下代码

1  <--html如上-->2  3  4  

　　结果：

　　

　　两个结果，终于不一样了。

　　我总结了一下：

　　　　span:nth-child(2)：大概是说的是两点：

• • 　　这个元素是span
  • 　　这个元素在同级别（同一个父元素，可能老大是其他元素：p i b 等）中排名老二

　　　　

　　　　span:nth-of-type(2)：大概是说的这两点：

• • 　　这个元素是span
  • 　　这个元素前面有且只有一个同级别的span（注意，这里老大一定是span，不是其他元素）

　　然后，我就发现跑题了，我说的应该是first-child和first-of-type啊。

　　别急，一样的道理，我又反过来验证了first-child和first-of-type

 

 

　　　　span：first-child：说的是两点：

• • 　　这个元素是span
  • 　　这个元素在同级别（同一个父元素）中排名老大（这里就不管老二是什么鬼了）

　　　　

　　　　span：first-of-type：说的这两点：

• • 　　这个元素是span
  • 　　这个元素是第一个span（这里注意，一定是span ，这里只看span）

　　说到这里，基本上就完了，我称这些都是“ first-child和first-of-type 们”。还有last啊什么的都是一样的。

　　说这么多过程，就是把我的学习经过记录下来，留给自己以后回忆，也给阅读者一个学习的过程。

　　最后，发表一下我的感慨：

　　　　这个所手册的人真的太坏了，写的都不是人话

　　　　我感觉，要是子元素都一样就选择用first-child们

　　　　　　　　要是子元素不同，经常用first-of-type    当然选择同级别的老几，nth-child还是要用的

　　欢迎大家踊跃来喷！