17370845950

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

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

1. :first-child 用法

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

  

    
第一项
    
第二项
    
第三项
  

  li:first-child {
    color: red;
  }

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

2. :last-child 用法

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

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

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

3. 注意事项与常见误区

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

• 如果第一个子元素不是目标标签，比如第一个是 p 而不是 li，那么 li:first-child 就不会生效。
• 它们只看兄弟节点顺序，不关心类名或属性。
• 空格和文本节点一般不影响，但结构必须正确。

4. 实际应用场景

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

• 给列表第一项添加上边距或去掉上边框
• 为最后一项按钮设置不同的背景色
• 轮播图中高亮首尾幻灯片

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