CSS：好玩的‘伪类’系列之——(:nth-last-child与:nth-last-of-type)

本文链接：https://blog.youkuaiyun.com/gavincz/article/details/89707769

这篇博客介绍了CSS中的`:nth-last-child`和`:nth-last-of-type`伪类选择器，这两个选择器从元素的结尾处反向匹配并修改样式。`:nth-last-child`匹配所有相同类型的倒数元素，`:nth-last-of-type`则限制在拥有同一父元素的相同类型元素中。文章提到了它们的触发条件、数字和关键字参数的用法，并指出这两个选择器在IE8及更低版本和Opera9.5以下不被支持。通过示例代码和效果图，帮助读者更好地理解和应用这些伪类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写系列时漏掉了，这个很简单，容易理解，话不多说，直接看吧

:nth-last-child

定义：匹配当前元素及与之相同的所有兄弟元素（从后往前），修改其样式。它基本上和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处。

触发条件：( )中为数字值，从1开始（注意，不是下标，木有0），也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素，2n+1代表匹配所有相同的奇数元素；也可以使用关键字odd（代表奇数）和even（代表偶数），修改指定的元素样式

兼容：IE8及8以下不支持 Opera9.5以下不支持

:nth-last-of-type

定义：在拥有同一父元素的情况下（前提），匹配一组相同的兄弟元素（从后往前），修改其样式。它基本上和 :nth-of-type() 一样，只是它从结尾处反序计数，而不是从开头处。

兼容：IE8及8以下不支持 Opera9.5以下不支持

举个栗子

html代码：

  <ul>
    <li>我是ul中的第一个li</li>
    <li>我是ul中的第二个li</li>
    <li>我是ul中的第三个li</li>
    <li>我是ul中的第四个li</li>
  </ul>

  <ol>
    <li>我是ol中的第一个li</li>
    <li>我是ol中的第二个li</li>
    <li class='special-li'>
      我有子元素
      <ol>
        <li>我是子元素ol中的第一个li</li>
        <li>我是子元素ol中的第二个li</li>
        <li>我是子元素ol中的第三个li</li>
      </ol>
    </li>
    <li>我是ol中的第四个li</li>
  </ol>

css代码：

ul,ol{
  width: 100%;
  margin-bottom: 20px;
  font-size: 14px;
}
li{
  cursor: pointer;
  width: 100%;
  text-align: left;
  text-indent: 12px;
  line-height: 30px;
  color: #3300CC;
}
.special-li{
  padding-left:15px ;
}
li:nth-last-child(3){/* 从后向前数，第三个元素 */
  color: #993399;
}
ol li:nth-last-of-type(1){/* ol下的li，从后向前数，第一个元素 */
  background-color: #66CC00;
}

效果图：