:last-child仅匹配同级同类型且排在最后的子元素，若dom中存在其他标签或嵌套结构则可能失效；:last-of-type更宽松但仍有隐藏元素干扰风险；推荐用li+li等兄弟选择器反向添加边框，兼容性好且稳定。
直接用 :last-child 去掉最后一项的边框或间距，多数情况下能行，但得小心它只认“同级最后一个”，不是“列表最后一项”。
为什么 :last-child 有时不生效
它匹配的是父元素下**类型相同且排在最后的子元素**。如果列表项中间穿插了其他标签（比如 <div>、<code><p></p> 或注释），或者用了 <li> 但外面套了 <ul></ul> 和 <div> 混合结构，<code>:last-child 就可能选错目标，甚至完全不匹配。
- 常见错误现象：
border-bottom: 1px solid #ccc;加在每项上，但最后一项的边框没消失 - 使用场景：导航菜单、卡片列表、表单项分隔线
- 真正生效的前提是：所有目标元素是同一标签名、且连续、且是父元素的直系子元素末尾
:last-of-type 是更稳妥的替代方案吗
它比 :last-child 宽松一点——只要求“同类型中最后一个”，不苛求是否连续或是否紧邻结尾。比如父元素里有 <h2></h2>、<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<div>、<code><div>，那么第二个 <code><div> 就是 <code>:last-of-type。
- 适合混合 DOM 结构，比如 CMS 输出带标题/描述的列表项
- 但仍有坑：如果最后一项前面还有同类型元素（比如多了一个隐藏的
<div style="display:none">），它就不是“最后一个”了 <li>性能影响极小，现代浏览器都支持，IE9+ 可用</li> <h3>更可靠的解法：用兄弟选择器反向控制</h3> <p>与其删最后一项的边框，不如给**前面每一项加底部边框**——也就是用 <code>+或~选择器，让每个非首项“响应前一项的存在”。这样逻辑更稳，不受 DOM 插入干扰。li + li { border-top: 1px solid #eee; }- 这写法给从第二项开始的每个
<li>加顶部边框，视觉上等效于去掉最后一项的底部边框 - 完全避开“找最后一个”的难题，兼容性好（IE7+）
- 参数差异明显：
+只匹配紧邻的下一个兄弟，~匹配后面所有同级同类型元素；通常用+更精准 - 注意：如果列表项之间有空格文本节点（比如换行缩进），某些旧版 IE 可能误判，建议 HTML 中避免无意义换行
最麻烦的其实是动态渲染场景——比如 Vue/React 列表里某项被
v-if或key控制显隐，此时:last-child的“最后”会随 DOM 实时变化，但人眼看到的“视觉最后一项”未必同步。这种时候，宁可加个 class 手动标记，也别赌伪类的稳定性。 - 这写法给从第二项开始的每个
