first与first-child 在使用过程中容易混淆。这次我们就把他理清楚。其实这是两个概念。

first：指集合中的第一个。举例：7层楼住户的第一户。 first-child：选择器选取属于其父元素的第一个子元素。2单元下每一层的第一户。 first-of-type 选择器选取属于其父元素的特定类型的第一个子元素的所有元素。

选取第一个 <p> 元素：

$("p:first")

定义和用法

:first 选择器选取第一个元素。

注意：这个选择器只用于选取单个元素。使用

选择器选取多个元素（每个父元素一个）。

最常见的用法：与其他选择器一起使用，选取指定组合中的第一个元素（就像上面的实例）。

语法

$(":first")

样例

     
这是第一个段落。
这是第二个段落。
这是最后一个段落。

first-child 选择器

选取属于 <p> 的父元素中第一个为 <p> 的元素：

$("p:first-child")

定义和用法

:first-child 选择器选取属于其父元素的第一个子元素。

注意：返回的是一个集合元素

语法

$(":first-child")

The first paragraph in body.
     
      
The first paragraph in div.
      
The last paragraph in div.
     
     
      This is a span element.
      
The first paragraph in another div.
      
The last paragraph in another div.
     
The last paragraph in body.

说明：

第一个黄底色是指 父body 标签下的第一个是p元素的元素。

第二个黄底色是指 父div 标签下的第一个是p元素。

first-of-type选择器（强调位置是第一个）

选取属于其父元素的第一个 <p> 元素的每个 <p> 元素：

$("p:first-of-type")

定义和用法

:first-of-type 选择器选取属于其父元素的特定类型的第一个子元素的所有元素。

语法

$(":first-of-type")

     
body 中第一个段落。
     
    
      
div 中第一个段落。
    
      
div 中的最后一个段落。
     
     
    
      这是一个 span 元素。    
      
另一个 div 中第一个段落。
    
      
另一个 div 中的最后一个段落。
     
body 中最后一个段落。

注意最后一个黄色p元素，它是div中的第一个p元素，但是它的位置不是第一个。