在css中:first-child与:last-child区别-css教程-PHP中文网

在css中:first-child与:last-child区别

P粉602998670

发布： 2025-10-23 14:17:02

原创

518人浏览过

:first-child选中父元素下第一个子元素，:last-child选中最后一个子元素，二者均要求该元素满足选择器条件且位于对应位置，如p:first-child仅当p为首个子元素时生效，p:last-child同理，关键区别在于目标子元素的位置不同。

在css中:first-child与:last-child区别

:first-child 和 :last-child 是 CSS 中的两个结构性伪类选择器，它们用于选中父元素下的第一个或最后一个子元素。虽然名称相似，但作用位置相反。

1. :first-child 选择器

匹配父元素中的第一个子元素，前提是该元素满足选择器条件。例如：

p:first-child 会选中作为其父容器中第一个子元素的
标签。
如果第一个子元素不是 p，则不会被选中。

示例：

<div>
  <p>我是第一个 p</p>
  <p>我是第二个 p</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1531">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680227515332.png" alt="OpenGPT">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1531">OpenGPT</a>
                            <p>给AI不同提示词，立即创建属于自己的ChatGPT应用程序</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="OpenGPT">
                                <span>162</span>
                            </div>
                        </div>
                        <a href="/ai/1531" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="OpenGPT">
                        </a>
                    </div>
                
</div>

<style>
  p:first-child {
    color: red;
  }
</style>

登录后复制

结果：第一个 p 文字变红，因为它是父 div 的第一个子元素且是 p 标签。

2. :last-child 选择器

匹配父元素中的最后一个子元素，同样要求该元素符合条件。例如：

p:last-child 会选中作为其父容器中最后一个子元素的
标签。
如果最后一个子元素不是 p，则不会被选中。

示例：

<div>
  <p>第一个段落</p>
  <p>最后一个段落</p>
</div>

<style>
  p:last-child {
    font-weight: bold;
  }
</style>

登录后复制

结果：第二个 p 加粗，因为它是父元素的最后一个子元素。

关键区别总结

:first-child 针对的是“第一个”子元素的位置。
:last-child 针对的是“最后一个”子元素的位置。
两者都依赖于元素在父容器中的实际位置，而不是类型顺序。
如果目标元素不在对应位置，即使存在也不会被选中。

基本上就这些。使用时注意结构布局是否符合预期，避免因前后标签干扰导致样式未生效。

以上就是在css中:first-child与:last-child区别的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css overflow属性有什么用 css子元素选择器的介绍 css默认样式的整理 css水平居中元素的宽度探究 css定位叠放次序的使用注意