使用 :last-of-type 与 ::after 结合可为非最后一个列表项添加分隔线。通过 .menu li:not(:last-of-type)::after 设置样式，在每个项目后插入垂直线或字符“|”，避免末尾多余分隔，常用于导航菜单美化，保持结构清晰。
在CSS中，可以利用 :last-of-type 与 ::after 伪元素结合，为列表或其他结构中的非最后一个元素添加装饰性分隔线。这种方法常用于美化导航、菜单或内容区块，避免在最后一个项目后出现多余的线条。
:last-of-type 的作用
:last-of-type 选择器用于选中其父元素下同类型标签中的最后一个元素。例如，在一组 p 标签中，它会匹配最后一个 p 元素。
这个选择器非常适合排除最后一个元素，从而控制样式显示逻辑。
::after 添加装饰性分隔线
::after 伪元素可以在目标元素的内容之后插入一个虚拟的装饰层，常用于添加图标、箭头或分隔线。
立即学习“前端免费学习笔记（深入）”；
通过结合使用 :not(:last-of-type) 和 ::after，可以为除最后一个元素外的所有元素添加分隔线。
实际应用示例：列表项间添加分隔线
假设有一组列表项，希望在每个项之间显示一条竖线或横线，但最后一个不显示：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
HTML 结构：
<ul class="menu"> <li>首页</li> <li>关于</li> <li>服务</li> <li>联系</li> </ul>
CSS 样式：
.menu li {
display: inline-block;
padding: 0 12px;
position: relative;
}
.menu li:not(:last-of-type)::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 1px;
height: 12px;
background-color: #ccc;
}
说明：
-
:not(:last-of-type)确保只有非最后一个li才会触发 ::after -
::after创建一条垂直分隔线，定位在每个项右侧中间位置 - 通过调整 width、height 和 background-color 可自定义线条样式
横向列表中的分隔符（如“|”）
若想用字符作为分隔符（比如竖线符号），可修改 content：
.menu li:not(:last-of-type)::after {
content: "|";
margin-left: 12px;
color: #999;
}
这样会在每个项目后添加一个“|”符号，最后一个除外。
基本上就这些。使用 :last-of-type 配合 ::after 是一种简洁高效的方式，实现视觉上的分隔效果，同时保持语义清晰和结构干净。关键是掌握否定选择器与伪元素的配合逻辑。
