:last-child 更适合结构单一的场景，如纯 li 列表；:last-of-type 更可靠于混排结构，能准确选中同类元素中最后一个。
什么时候用 :last-child 更合适
当你要选中父容器中「最后一个子元素」，且这个元素恰好是你关心的类型时，:last-child 最直接。比如一个 ul 里只放 li，且你只想给最后一个 li 去掉下边框：
ul li:last-child { border-bottom: none; }
这种写法成立的前提是：最后一个子元素必须是 li。一旦后面加了注释、空格文本节点（虽然不渲染）、或意外插入一个 div，:last-child 就失效了——它认的是 DOM 树里的位置，不是标签类型。
- 适合结构干净、子元素类型单一的场景（如纯
li列表、纯td表格单元格） - 对 HTML 顺序敏感，HTML 改动后容易“断掉”
- 不能跳过非目标类型的兄弟节点
为什么 :last-of-type 在混合结构里更可靠
当你面对的是混排结构——比如一个 section 里有多个 p、几个 div、还夹着一个 blockquote，而你想给「最后一个 p」加特殊样式——这时 :last-of-type 才是正确选择。
它会遍历所有同名标签（这里是 p），找出其中 DOM 顺序最靠后的那个，不管中间隔着多少其他类型元素。
立即学习“前端免费学习笔记（深入）”；
-
section p:last-of-type→ 选中该section内最后一个p元素 - 即使它前面有 5 个
div和 2 个blockquote，也不影响匹配 - 但要注意：如果最后一个
p后面还有另一个p（哪怕被注释或 JS 动态插入），它就不再是 “last”
:last-child 和 :last-of-type 同时存在时谁生效
这不是优先级竞争，而是匹配逻辑完全不同。一个元素可能同时满足两个条件，也可能只满足其一。
