:last-child 选择器可精准选中父容器中最后一个子元素，按DOM位置匹配而非元素类型，但受末尾注释、空格或异类标签影响；需按类型匹配末位时应改用 :last-of-type。
直接用 :last-child 选择器就能精准选中父容器里的最后一个子元素，无需额外加类名或 JS。
基础用法：匹配最后一个子元素
只要目标元素是其父级的最后一个子节点， 单独用 如果结构动态、不可控，或者需要兼容老版本 IE（:last-child 就能命中。注意它认的是“位置”，不是“类型”——哪怕最后一个子元素是 ，前面全是
ul li:last-child { color: red; } → 给无序列表中最后一个 加红色文字section > p:last-child 表示只选 的直接子级中最后一个
button:last-child:hover 控制最后一个按钮的悬停态注意边界：不是所有“最后一个”都能被选中
:last-child 只看 DOM 结构中的顺序，如果最后一个子元素和你想设样式的元素类型不同，就可能失效。
），会导致目标元素失去“最后一个”身份，此时 p:last-child 不会匹配 B，因为 B 后面还有
:last-of-type 更稳妥实用技巧：配合其他选择器增强控制力
:last-child 有时不够灵活，结合其他规则可以更精准地落地。
nav a:not(:last-child) { margin-right: 1rem; } → 给导航链接加右间距，但最后一个不加li:last-child a { font-weight: bold; } → 最后一个列表项里的链接加粗@media (max-width: 768px) { .card-grid > div:last-child { margin-bottom: 0; } }
替代方案：当 :last-child 不适用时
:last-child IE9+ 支持），可考虑这些办法：
.last { … } —— 简单直接，适合静态内容:last-of-type：选同类型中排最后的，比如 div p:last-of-type 会选 ，不管中间有没有其他标签v-if="index === list.length - 1"
