结论：必须用 :nth-last-of-type(1) 才能精准选中同级中最后一个特定类型元素，因其按标签名分组倒序计数，而 :last-child 按所有子元素位置判断且无 :last-of-type 伪类。
怎么用 :nth-last-of-type() 选中同级里最后一个特定类型元素
直接说结论：不能靠 :last-child，它只认位置，不认类型；得用 :nth-last-of-type(n)，配合 n=1 才能精准命中“同级中最后一个 div”或“最后一个 p”这类目标。
常见错误是写成 div:last-child，结果发现没生效——因为那个 div 后面可能跟着一个 span 或注释节点，它就不是最后一个子元素了，:last-child 直接跳过。
-
:last-of-type不存在，CSS 没这个伪类，别搜也别试 - 必须用
:nth-last-of-type(1)，等价于“倒数第一个该类型” - 注意 HTML 中的文本节点、注释、
script标签都会算作兄弟节点，但不影响of-type的类型计数（它只看元素标签名） - 如果目标元素是自定义标签（如
my-card），确保浏览器支持且未被当成未知元素降级处理
:nth-last-of-type() 和 :last-child 的实际差异在哪
假设 HTML 是：
<section> <p>第一段</p> <div>盒子1</div> <p>第二段</p> <div>盒子2</div> <span>说明</span> </section>那么：
-
div:last-child→ 不匹配任何元素（div后面还有span） -
div:nth-last-of-type(1)→ 匹配第二个div（它是所有div中倒数第一个） -
p:last-child→ 不匹配（p后面有div和span） -
p:nth-last-of-type(1)→ 匹配第二个p
关键区别：后者按“同类元素”分组计数，前者按“所有子元素”统一排位。真实项目里，DOM 常含不可见节点，of-type 系列更可靠。
为什么不用 :nth-of-type() 加个大数字（比如 999）代替
有人图省事写 div:nth-of-type(999) 试图“选最后一个”，这很危险：
立即学习“前端免费学习笔记（深入）”；
- 如果页面动态插入新
div，数量超过 999，规则就失效了 - 如果只有 2 个
div，999根本不匹配，不如nth-last-of-type(1)稳定 - CSS 解析器不会“智能取最大值”，它就是字面匹配第 999 个，没有 fallback
- 可读性差，后续维护的人得猜你是不是真需要第 999 个
别绕弯，nth-last-of-type(1) 就是标准解法，语义清晰，浏览器兼容到 IE9+，现代项目可放心用。
遇到伪类不生效？先检查这三件事
不是语法写错，而是环境卡住了：
- 父容器用了
display: contents—— 这会让子元素脱离渲染树，of-type失效（因为“同级”关系被破坏） - 目标元素被 JS 动态添加，但 CSS 规则加载早于 DOM，需确认样式表是否在
<head>正确引入，或用!important排查层叠问题（仅调试用） - 用了 Shadow DOM，普通 CSS 选不到影子树内的元素，得用
::slotted()或在组件内部定义样式
真正难的不是写对选择器，而是搞清当前 DOM 结构到底“算不算同级”——打开开发者工具，挨个点开父元素，看子节点列表里类型和顺序，比空想靠谱得多。
