如何用css选择nth-last-of-type元素

来源：个人站长网作者：缅甸程序员头衔：程序员

导读：本期聚焦于小伙伴创作的《如何用css选择nth-last-of-type元素》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何用css选择nth-last-of-type元素》有用，将其分享出去将是对创作者最好的鼓励。

在css中，nth-last-of-type是一个结构伪类选择器，用来从父元素的末尾开始，挑选指定类型的子元素。它和nth-of-type逻辑相似，但计数方向反过来，从最后一个同类型元素往前数。这个选择器在处理动态列表、末尾强调样式时非常实用。

基本语法

语法格式如下，其中selector是标签名或基础选择器，an加b是计数表达式：

/* 选择父元素中倒数第3个p元素 */
p:nth-last-of-type(3) {
  color: red;
}

/* 选择倒数第偶数个div */
div:nth-last-of-type(even) {
  background: #f0f0f0;
}

括号里的参数可以是具体数字、关键字或表达式，常见形式有：

假设有如下结构，两者选取结果不同：

<div>
  <span>1</span>
  <p>a</p>
  <p>b</p>
  <span>2</span>
  <p>c</p>
</div>

若写p:nth-last-of-type(1)，会选中最后一个p也就是c；而p:nth-of-type(1)选中第一个p也就是a。计数只针对同类型标签，忽略其他类型节点。

比如想给文章列表最后两条做弱化显示：

/* 倒数第1和第2个列表项半透明 */
li:nth-last-of-type(-n+2) {
  opacity: 0.5;
}

表达式中-n+2表示从末尾取前两个。这样无需在html里加额外class，样式更干净。

使用时应注意，nth-last-of-type只看元素类型，不区分class。如果同类型元素中只想选带某类的，要写成p.item:nth-last-of-type(2)这种组合形式。另外旧版ie不支持该伪类，需要兼容时考虑用js兜底。

css nth-last-of-type 选择器伪类修改时间：2026-07-25 14:00:28

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。