jQuery中的伪类first()，:first，:first-child区别

first() 是被选元素的第一个元素。

<body>
//HTML部分
//:first() 测试
<div>
    <p>测试first()</p>
    <p>测试first()</p>
    <p>测试first()</p>
</div>
<div>
    <p>测试first()</p>
    <p>测试first()</p>
    <p>测试first()</p>
</div>
</body>

//js部分
<script type="text/javascript">
    $(function(){
        $("div p").first().css("color","red");
    })
</script>

:first 获取第一个元素。

<div>
    <p>测试:first</p>
    <p>测试:first</p>
    <p>测试:first</p>
</div>
<div>
    <p>测试:first</p>
    <p>测试:first</p>
    <p>测试:first</p>
</div>
</body>
</html>

<script type="text/javascript">
    $(function(){
         $("div p:first").css("color","red");

    })
</script>

jQuery中的伪类first()，:first，:first-child区别

:first-child 选取属于其父元素的第一个子元素的所有元素

<div>
    <p>测试:first-child</p>
    <p>测试:first-child</p>
    <p>测试:first-child</p>
</div>
<div>
    <p>测试:first-child</p>
    <p>测试:first-child</p>
    <p>测试:first-child</p>
</div>
</body>
</html>

<script type="text/javascript">
    $(function(){
         $("div p:first-child").css("color","red");

    })
</script>

jQuery中的伪类first()，:first，:first-child区别