[分享]css元素判断最后一个

CSS中有一些伪类可以用来选取元素的某些状态，比如:hover表示鼠标悬浮在元素上的状态。在这些伪类中，有一个:lastchild，它可以选择某个元素作为其它兄弟元素中的最后一个。通常情况下，我们使用...

CSS中有一些伪类可以用来选取元素的某些状态，比如:hover表示鼠标悬浮在元素上的状态。在这些伪类中，有一个:last-child，它可以选择某个元素作为其它兄弟元素中的最后一个。通常情况下，我们使用:last-child来给最后一个元素添加样式。

/* 选择最后一个p元素 */
p:last-child {
  /* 添加样式 */
} 

需要注意的是，:last-child选定的是作为其它兄弟元素中的最后一个，而不是所有元素中的最后一个。如果一个元素本身就是父元素的最后一个，那么它就会被选中。

如果我们只想选择某一类型元素中的最后一个，可以结合标签选择器来实现。

/* 选择最后一个p元素 */
p:last-of-type {
  /* 添加样式 */
} 

同样的，:last-of-type选定的是该类型元素中的最后一个，而不是所有元素中的最后一个。如果我们想选择一个特定class的元素中的最后一个，可以这样写：

/* 选择最后一个class为box的元素 */
.box:last-of-type {
  /* 添加样式 */
} 

除了:last-child和:last-of-type外，CSS还提供了:first-child和:first-of-type、:nth-child(n)和:nth-of-type(n)等伪类，这些伪类可以更精确地选取元素。