淺談jquery選擇器 :first與:first-child的區別

一個例子：

<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul>

   

first表示（所有父元素合併後的）第一個；first-child表示（每個父元素的）第一個

$('ul li:first')返回john所在的li。 找出所有ul下第一個li元素

$("ul li:first-child") 回傳 john glen。 尋找每個ul下第一個元素是li元素dom元素。

擴充用法：$("body *:first")表示body下的第一個孩子元素； $("body *:first-child")表示body下的每一個是第一個孩子元素的元素

另外，css選擇器從右往左，如果是這樣；

<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 
<div>DIV</div>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul>

   

那麼$("ul li:first-child") 只返回John. 查找每個的第一個孩子元素，如果是li元素則匹配，否則不匹配.

$('li:first')匹配第一個li元素  $("li:first-child")匹配第一個li元素，它是某個元素的第一孩子元素