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

最新推荐文章于 2022-12-22 14:33:02 发布

花生大帝

最新推荐文章于 2022-12-22 14:33:02 发布

阅读量1.1k

点赞数

文章标签：伪类

本文链接：https://blog.csdn.net/qq1026432050/article/details/83051195

版权

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>

在这里插入图片描述

: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>

在这里插入图片描述