css如何选中第一个或最后一个元素_使用first child与last child伪类

:first-child和:last-child伪类分别匹配父元素中同级第一个和最后一个子元素，且要求标签名一致；它们依据DOM顺序而非元素类型，与:first-of-type等不同。

要选中父容器内的第一个或最后一个子元素，CSS 提供了 :first-child 和 :last-child 伪类。它们匹配的是在**同级元素中位置靠前或靠后**的元素，且必须是某个父元素的直接子元素。

选中第一个子元素（:first-child）

该伪类选中其父元素下**第一个出现的子元素**，前提是该子元素的标签名与选择器一致。

<li>例如 li:first-child 会匹配 <ul></ul> 或 <ol></ol> 中第一个 <li> 元素 <li>如果第一个子元素不是 li（比如开头有个 <p></p>），那这个 li 就不会被选中 <li>它不关心元素内容或 class，只看 DOM 树中的顺序和标签是否匹配

选中最后一个子元素（:last-child）

与 :first-child 类似，:last-child 匹配父元素中**最后一个子元素**，且标签需一致。

<li> div:last-child 只有当某个父容器的最后一个子节点是
时才生效 <li>若末尾是 或文本节点，即使前面有多个 div，也不会命中 <li>常用于移除列表最后一项的边框、调整间距等场景
注意：first-child / last-child 不等于 first-of-type / last-of-type
这是容易混淆的点：:first-child 看的是“第几个孩子”，而 :first-of-type 看的是“同类型中的第一个”。比如：
立即学习“前端免费学习笔记（深入）”；

Stable Video
Stability AI 发布的开源AI视频大模型，用文字或图像创建视频，把你的概念变成迷人的电影
227
查看详情
HTML 示例：
<article><br>  <h2>标题</h2><br>  <p>段落1</p><br>  <p>段落2</p><br></article>
登录后复制
<li> p:first-child → 不匹配（<p></p> 不是第一个子元素） <li> p:first-of-type → 匹配第一个 <p></p>（即“段落1”） <li> p:last-of-type → 匹配“段落2”，而 p:last-child 同样匹配它（因为此处它也恰好是最后一个子元素）
实用小技巧
<li>想给列表第一项加顶部边框、最后一项加底部边框？用 li:first-child 和 li:last-child <li> 清除浮动容器内最后一行子项的右外边距？可结合 :last-child 设置 margin-right: 0 <li>配合 :not() 使用，如 li:not(:last-child) 可为除最后一项外的所有项统一加右边线

以上就是css如何选中第一个或最后一个元素_使用first child与last child伪类的详细内容，更多请关注php中文网其它相关文章！