:nth-last-child(1 of .item)是唯一原生css解法，需配合直接子选择器使用；不支持时须用js为最后一个.item添加.last-item类来fallback。
.item:last-child 看似能选中最后一个 .item，但实际只匹配“父元素的最后一个子节点且恰好有 .item 类”——嵌套结构里子容器的末项也会被误选，根本不是你想要的“所有 .item 中的最后一个”。
为什么 .item:last-child 和 .item:last-of-type 都不行
这两个选择器都按“各自父级上下文”工作，不是全局扫描：.item:last-child 会命中 .container > .item（你要的），但也命中 .container > div > .item:last-child（嵌套里的，不该动）；.item:last-of-type 更糟——它只看标签名，.item 是 div 就等价于 div:last-of-type，完全不认 class，语义彻底错位。
- 错误现象：给
.card加margin-bottom: 0，结果卡片内部的子.card也消失了下边距 - 根本原因：DOM 层级没理清，选择器在每一层父元素上独立求值
- 兼容性陷阱：
:nth-last-child(1 of .item)虽精准，但仅 Chrome 105+、Firefox 109+ 支持，IE/旧 Safari 直接忽略
:nth-last-child(1 of .item) 是现代解法，但得确认浏览器支持
这是目前唯一原生 CSS 能表达“在所有匹配 .item 的直接子元素中取最后一个”的写法，必须配合直接子选择器 > 使用：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
.container > .item:nth-last-child(1 of .item) {
border-bottom: none;
}
- 必须写
.container > .item，否则:nth-last-child(1 of .item)在嵌套层级里仍会生效 - 如果
.item不是连续排列（中间夹着其他元素），这个选择器依然有效——它只统计兄弟节点中带.item的那些，再倒数第一个 - 不支持时表现为空规则，样式不会回退，必须主动 fallback
兼容 fallback：JS 补位最稳妥
当项目需支持 Chrome 104 或更低版本时，纯 CSS 没有可靠方案，JS 是事实标准：
const items = document.querySelectorAll('.container > .item');
if (items.length) {
items[items.length - 1].classList.add('last-item');
}
对应 CSS 写成：
.container > .item.last-item {
border-bottom: none;
}
- 注意用
.container > .item限定范围，避免 querySelectorAll 拿到嵌套里的.item - 加 class 比改内联样式更利于维护，也方便后续用 JS 移除或切换
- 如果 DOM 动态增删，需在插入后重新运行这段逻辑，或用
MutationObserver
真正卡住人的从来不是语法记不住，而是打开开发者工具时没点开那个“Reveal in Elements panel”——一眼看清父子链，比试十遍选择器都快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
