使用 :last-of-type 可精准设置导航最后一个菜单项样式，如 li:last-of-type { border-right: none; } 去除右边框，相比 :last-child 更灵活，不要求元素为最后一个子节点，适用于同类型标签的末项样式控制。
在制作CSS导航栏时，如果想让最后一个菜单项拥有不同的样式（比如去掉右边框、改变颜色或增加特殊图标），可以使用 :last-of-type 伪类选择器精准定位到最后一个菜单项。
为什么用 :last-of-type？
当导航栏的菜单项是同级的相同标签（如多个 <li> 或 <a>）时，:last-of-type 能选中该类型元素中的最后一个。相比 :last-child，它更灵活，不要求目标必须是父元素的最后一个子元素，只要它是该类型中的最后一个即可。
实际使用示例
假设你的导航结构如下：
<nav><ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
你想让最后一个 <li> 的右边框不显示，可以这样写CSS：
立即学习“前端免费学习笔记（深入）”；
li:last-of-type {border-right: none;
}
或者针对链接本身设置不同样式：
li a:last-of-type {color: #ff6b6b;
}
与其他选择器对比
- :last-child：只有当目标是父元素最后一个子元素时才生效，限制较大
- :nth-last-of-type(1)：等价于 :last-of-type，但写法更长
- .nav li:last-of-type：加上类名可提高优先级和可读性
基本上就这些。使用 :last-of-type 是处理导航末项样式的简洁高效方式，兼容性好，现代浏览器都支持，适合大多数布局场景。
