first與first-child 在使用過程中容易混淆。這次我們就把他理清楚。其實這是兩個概念。
first：指集合中的第一個。舉例：7層樓住戶的第一戶。
first-child：選擇器選取屬于其父元素的第一個子元素。2單元下每一層的第一戶。
first-of-type 選擇器選取屬于其父元素的特定類型的第一個子元素的所有元素。
選取第一個 <p> 元素：
$("p:first")
定義和用法
:first 選擇器選取第一個元素。
注意：這個選擇器只用于選取單個元素。使用
選擇器選取多個元素（每個父元素一個）。
最常見的用法：與其他選擇器一起使用，選取指定組合中的第一個元素（就像上面的實例）。
語法
$(":first")
樣例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:first").css("background-color","yellow");
});
</script>
</head>
<body>
<p>這是第一個段落。</p>
<p>這是第二個段落。</p>
<p>這是最后一個段落。</p>
</body>
</html>
image.png
first-child 選擇器
選取屬于 <p> 的父元素中第一個為 <p> 的元素：
$("p:first-child")
定義和用法
:first-child 選擇器選取屬于其父元素的第一個子元素。
注意：返回的是一個集合元素
語法
$(":first-child")
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:first-child").css("background-color","yellow");
});
</script>
</head>
<body>
<p>The first paragraph in body.</p>
<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<span>This is a span element.</span>
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
</div>
<p>The last paragraph in body.</p>
</body>
</html>
image.png
說明：
第一個黃底色是指 父body 標簽下的第一個是p元素的元素。
第二個黃底色是指 父div 標簽下的第一個是p元素。
first-of-type選擇器（強調(diào)位置是第一個）
選取屬于其父元素的第一個 <p> 元素的每個 <p> 元素：
$("p:first-of-type")
定義和用法
:first-of-type 選擇器選取屬于其父元素的特定類型的第一個子元素的所有元素。
語法
$(":first-of-type")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:first-of-type").css("background-color","yellow");
});
</script>
</head>
<body>
<p>body 中第一個段落。</p>
<div style="border:1px solid;">
<p>div 中第一個段落。</p>
<p>div 中的最后一個段落。</p>
</div><br>
<div style="border:1px solid;">
<span>這是一個 span 元素。</span>
<p>另一個 div 中第一個段落。</p>
<p>另一個 div 中的最后一個段落。</p>
</div>
<p>body 中最后一個段落。</p>
</body>
</html>
image.png
注意最后一個黃色p元素，它是div中的第一個p元素，但是它的位置不是第一個。
