1.
:first 属于#basic Filters#，
:first 选择器用于选取第一个元素。
最常见的用法：与其他元素一起使用，选取指定组合中的第一个元素。
例：
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("p:first").css("background-color","yellow"); }); </script> </head> <body> <p>This is the first paragraph.</p> *选取该元素 <p>This is the second paragraph.</p> <p>This is the last paragraph.</p> </body> </html>
$("p:first")用于选择第一个p元素。当不指定元素组合时，即$(":first")，这样也是$("*:first")的简写，此时黄色背景就被加到html元素上。
2.
:first-child属于#Child Filters#
:first-child选择器用于选取属于其父元素的第一个子元素的元素。
最常见的用法：与其他元素一起使用，选取其父元素的第一个子元素的元素。
例:
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/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>
$("p:first-child")用于选取属于其父元素和所有兄弟元素的第一个为 <p> 的元素。
被选取需要两个条件：1.为其父元素的第一个子元素
2.为<p>元素
当不指定元素组合时，即$(":first-child")，这样也是$("*:first-child")的简写，此时将选取所有第一个子元素。
3.
:first-of-type 属于#Child Filter#
:first-of-type 选择器选取属于其父元素的特定类型的第一个子元素的所有元素
例：
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("p:first-of-type").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>
$("p:first-of-type")用于选取其父元素的第一个<p>元素的每个<p>元素。
被选取需要两个条件：1.它的哥哥没有一个是p元素
2.为<p>元素
当不指定元素组合时，即$(":first-of-type")，这样也是$("*:first-of-type")的简写，此时将选取各种种类元素的第一个。