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选择器（强调位置是第一个）
选取属于其父元素的第一个 <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元素，但是它的位置不是第一个。
