: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 同时存在时谁生效
这不是优先级竞争，而是匹配逻辑完全不同。一个元素可能同时满足两个条件，也可能只满足其一。
例如：
第一段
说明块最后一段
-
article p:last-child→ 不匹配（最后一个子元素是p？不，是p，等等——这里最后一个子确实是p，所以它会匹配；但如果末尾加个，就不匹配了） -
article p:last-of-type→ 总是匹配最后一个p，只要它是p类型中 DOM 顺序最靠后的 - 两者可共存，但语义不同：一个是“位置最后”，一个是“同类中位置最后”
容易被忽略的兼容性与性能细节
两者都属于 CSS 伪类，现代浏览器支持良好，IE9+ 都支持 :last-child，:last-of-type 也是 IE9+。真正要注意的是运行时行为：
- 它们不触发重排，但频繁使用在大量子元素上（比如上千个
li）时，浏览器仍需遍历子节点树来判断“最后”，有一定计算开销 - 动态插入元素后，样式会自动更新，无需手动干预——但如果你用 JS 操作了
innerHTML并替换整个父容器，那所有伪类都会重新计算 -
:last-of-type对元素的「标签名」严格区分大小写（HTML 中通常忽略，但 XHTML 或 SVG 上可能出问题）
实际项目中，别想当然默认二者等价；先看 HTML 结构是否稳定，再决定用哪个——多数时候，:last-of-type 更接近你心里想的“最后一个某类元素”。
