:last-child 才是给列表最后一个 li 加样式的可靠选择，因为它只判断是否为父元素的最后一个子节点且是 li，不依赖同类型元素的排列，而 :last-of-type 易受其他类型兄弟节点或文本节点干扰。
直接用 :last-of-type 给列表最后一个元素加颜色，大概率不会生效——它选的不是“列表里最后一个 li”，而是“父容器中同类型子元素里的最后一个”。这是最常见的误用场景。
为什么 :last-of-type 常常不选中你想要的 li
:last-of-type 匹配的是“在所有兄弟元素中，同为 li 类型的最后一个”，但它会忽略其他类型的兄弟节点。一旦列表里混有 div、p、注释或空格文本节点（比如换行缩进），就可能失效。
- HTML 中换行和缩进会被解析为文本节点，而文本节点不是元素，
:last-of-type会跳过它们继续找——这本身没问题 - 但如果你的
ul里除了li还有li以外的标签（比如<li>...</li> <div class="ad"></div> <li>...</li>），那两个li就不再“相邻同类型”，:last-of-type会选中第二个li，而非整个列表末尾那个 - 更隐蔽的是：如果父容器是
div，里面直接放li（没套ul），那这些li其实是非法 HTML，浏览器会尝试修复，DOM 结构可能意外改变，:last-of-type行为不可靠
真正稳定的选择方式：用 :last-child 或 :nth-last-child(1)
只要你的列表结构干净（即 li 是父容器的直接子元素，且没有其他类型兄弟元素干扰），:last-child 才是你该用的：
ul li:last-child {
color: #e74c3c;
}
它不看元素类型，只看“是不是最后一个子节点且是 li”。相比 :last-of-type，它对 DOM 结构变化更敏感但也更可预测。
立即学习“前端免费学习笔记（深入）”；
- 如果父容器里只有
li，:last-child和:last-of-type效果一致，但前者语义更准 - 想兼容老浏览器（IE8+）？
:last-child支持度更好；:last-of-type在 IE9+ 才支持 - 需要更灵活控制（比如倒数第二个）？用
:nth-last-child(1)，它和:last-child等价，但写法上便于后续扩展
遇到嵌套或动态内容时，别依赖 CSS 伪类
当列表由 JS 动态生成、或存在条件渲染（比如某些 li 被 v-if / *ngIf 移除）、或服务端模板插入了非 li 标签时，CSS 伪类容易失灵。
- React/Vue/Svelte 场景下，更推荐给最后一个元素加特定 class，比如
class="list-item list-item--last"，由 JS 控制 - 纯静态页面但结构复杂？用
:nth-of-type(n)配合已知项数（不推荐，脆弱） - 真要 CSS 解决且必须用类型判断？确认父容器内
li是唯一元素类型，并用浏览器开发者工具检查Computed面板里实际匹配到的元素
最稳妥的做法永远是：先 inspect 元素，看它的父节点下到底有哪些兄弟节点；再决定用 :last-child 还是加 class 控制。伪类不是黑魔法，它严格按 DOM 树工作——树不对，样式就不可靠。
