:last-child选父元素最后一个子节点，不计标签类型；:last-of-type选父元素中同标签类型的最后一个子元素，忽略其他类型兄弟节点。
:last-child 和 :last-of-type 都能“选中最后一个”，但它们认的“最后”根本不是一回事——用错一个，样式就悄悄失效。
什么时候该用 :last-child？
它只看 DOM 顺序：只要目标元素是父容器的**最后一个直接子节点**，不管它是什么标签，都能命中。
- 适用场景：清除列表末项边框、给卡片流最后一张加 margin-bottom: 0
- 常见错误：写
div.some-class:last-child想选“.some-class 中最后一个”，结果嵌套结构里子容器的末项也被染上样式 - 注意边界：
ul li:last-child稳，因为ul下通常只有li；但section > div:last-child就得确认 section 末尾真没p或footer
什么时候必须用 :last-of-type？
它只看标签名：在所有同类型兄弟元素中，选排在最后的那个。不关心它是不是整个父容器的末尾子元素。
- 适用场景：多个
p段落中只给最后一个加margin-bottom: 0，中间哪怕夹着img或blockquote也不影响 - 典型误判：以为
p:last-of-type等价于 “最后一个p”，其实它等价于 “所有p兄弟里 DOM 位置最靠后的那个” - 兼容性提醒：IE8 不支持，需要 JS 降级或改用结构约束（比如统一用
div包裹再选div:last-child）
想选“带某个 class 的最后一个直接子元素”，:last-child 和 :last-of-type 都不行
比如父容器里有 、嵌套 ，你只想高亮最后一个 .item（即第三个），前两个选择器都会把嵌套里的那个也带上。
- 根本原因：两者都作用于“各自父级上下文”，不是全局扫描
- 可行解法：改用
:nth-last-child(1 of .item)（现代浏览器支持，Chrome 105+、Firefox 109+） - 兼容 fallback：JS 查询
document.querySelector('.container .item:last-of-type')并手动加 class
真正难的不是记住语法，而是看清 HTML 结构里“谁是谁的父级”。遇到嵌套干扰时，先手写几个 console.log 打印父节点，比反复试选择器快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
