css伪类:first-child与last-child区别如何使用-css教程-PHP中文网

css伪类:first-child与last-child区别如何使用

P粉602998670

发布： 2025-10-14 15:36:01

原创

341人浏览过

:first-child选中父元素下第一个子元素，如li:first-child使首个li变红；:last-child选中最后一个，如li:last-child加粗末项；二者依赖实际结构位置，若首/尾元素不匹配则无效，常用于列表、导航等首尾样式控制。

css伪类:first-child与last-child区别如何使用

:first-child 和 :last-child 是 CSS 中常用的结构伪类，用于选中父元素下的第一个或最后一个子元素。它们的使用方式相似，但作用位置相反。

这个伪类匹配其父元素中的第一个子元素，前提是该元素满足选择器条件。

例如：

  <ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ul>

登录后复制

CSS 样式：

  li:first-child {
    color: red;
  }

登录后复制

结果：只有“第一项”文字变为红色，因为它是 ul 下的第一个 li 元素。

这个伪类匹配其父元素中的最后一个子元素，同样需满足选择器条件。

稿定AI社区

在线AI创意灵感社区

继续上面的例子：

  li:last-child {
    font-weight: bold;
  }

登录后复制

结果：“第三项”加粗显示，因为它是 ul 中最后一个 li。

这两个伪类依赖于元素在父容器中的实际位置，而不是类型。以下几点容易出错：

常用于列表、导航栏、表单控件等需要首尾特殊样式的场景。

基本上就这些，掌握好结构关系就能准确使用。不复杂但容易忽略细节。

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

大家都在看：