css3——:last-child

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情

在项目开发的过程中，我们经常遇到在一个列表中需要对最后一个子元素的样式进行处理的情况，在这种情况下，我们就需要用到css3的:last-child选择器。下面我们来看下这个选择器的使用场景。

:last-child

:last-child选择器表示选择父元素中的最后一个指定元素，例如，p:last-child，表示选择父元素中最后一个p元素。

假设现在有一个列表，每个子元素都有底部边框，如下图所示：

但现在要求最后一个子元素没有底部边框，那么我们就可以用:last-child来实现，如下代码所示，我们在写样式的时候，只需要用:last-child来选择最后一个样式类为list-item的元素，然后设置其border-bottom为none即可实现。

// html
<div class="list">
  <div class="list-item">排序一</div>
  <div class="list-item">排序二</div>
  <div class="list-item">排序三</div>
</div>
// less
.list {
  .list-item {
    border-bottom: 1px solid #e4e4e4;
    &:last-child {
      border-bottom: none;
    }
  }
}

但如果在列表的html结构中，有其他不同的类或其他不同的元素，:last-child选择器还会生效吗？

<div class="list">
  <div class="list-item">排序一</div>
  <div class="list-item">排序二</div>
  <div class="list-item">排序三</div>
  <div class="test">test</div>
  <!-- <p class="list-item">test</p> -->
</div>

如上，在列表的html结构中最后加入一个和上述不一样的元素，发现:last-child选择器不生效。

所以，:last-child选择器的原理其实是先找出父元素中的最后一个子元素，然后在检测这个元素是不是属于指定的元素，如果属于就找到了，如果不属于就找不到，上述结构中，先是找到了最后一个元素是样式类为test的元素，但我们使用:last-child选择器的是样式类为list-item的元素，所以匹配不上，故而针对最后一个样式类为list-item而设置的底部边框为none的样式也不生效。

同样，将上述代码中样式类为test的元素换成注释掉的p元素，即是样式类都是list-item，但因为标签不一样，:last-child选择器依旧不会生效。

所以，:last-child选择器仅仅适用于父元素当中的子元素都是同一个标签且样式类相同的情况下。