jQuery selector中 :first :first-child :first-of-type的差别

: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元素上。

: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")用于选取属于其父元素和所有兄弟元素的第一个为 的元素。

　　被选取需要两个条件：1.为其父元素的第一个子元素

2.为元素

　　当不指定元素组合时，即$(":first-child")，这样也是$("*:first-child")的简写，此时将选取所有第一个子元素。

: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")用于选取其父元素的第一个元素的每个元素。

　　被选取需要两个条件：1.它的哥哥没有一个是p元素

2.为元素

　　当不指定元素组合时，即$(":first-of-type")，这样也是$("*:first-of-type")的简写，此时将选取各种种类元素的第一个。