用:nth-child(1):nth-last-child(n)可判断同级元素总数为n，因该元素既是首项又是倒数第n项；需配合:nth-child使用才能推导总数，单独:nth-last-child仅定位位置不反映总数。
怎么用 :nth-last-child 判断同级元素个数
核心思路是：利用 :nth-last-child(n) 从末尾反向定位，当某个元素既是第 1 个（:nth-child(1)）又是倒数第 n 个（:nth-last-child(n)），就说明它后面有 n−1 个兄弟，即同级共 n 个元素。
比如想给「只有 1 个子元素」的容器里那个唯一子元素加边框：
div > p:nth-child(1):nth-last-child(1) {
border: 2px solid red;
}
这个选择器生效的前提是：p 同时满足“是第一个子”且“是倒数第一个子”，意味着它是唯一子元素。
-
:nth-child(1):nth-last-child(1)→ 共 1 个同级 -
:nth-child(1):nth-last-child(2)→ 共 2 个同级（该元素是第一个，后面还有 1 个） -
:nth-child(2):nth-last-child(1)→ 共 2 个同级（该元素是第二个，也是最后一个）
为什么不能只用 :nth-last-child 单独判断总数
:nth-last-child(n) 只表示“倒数第 n 个”，不保证前面没其他元素。比如 div > p:nth-last-child(3) 匹配的是倒数第三个 p，但整个列表可能有 5 个、10 个甚至更多 p —— 它只定位位置，不推导总数。
必须配合 :nth-child() 或兄弟组合（如 + p、~ p）才能锚定边界。
- 单独
:nth-last-child(1)只能选最后一个，无法知道前面有几个 - 要确认总数为 3，得写
:nth-child(1):nth-last-child(3)或:nth-child(3):nth-last-child(1) - 如果父容器混有其他类型子元素（如
span），:nth-child会把它们一起算进去，结果可能意外失效
同级兄弟选择器（+ 和 ~）怎么配合使用
当你要根据“后面还有没有兄弟”来样式适配时，+（紧邻）和 ~（后续所有）比 :nth-last-child 更直观、更轻量。
例如：让最后一个 li 不显示右侧分割线：
li + li {
border-left: 1px solid #ccc;
}
/* 所有非第一个 li 都有左边线，等效于“除最后一个外都加线” */
或者更精确地隐藏最后一个：
li:last-child {
border-right: none;
}
-
li + li匹配所有“前面有li的li”，即从第二个开始 -
li ~ li匹配所有“前面有任意li的li”，效果同上，但性能略差 - 注意：
+和~只看 DOM 顺序，不关心是否同类型父容器；而:nth-last-child是基于父容器下所有子元素计数的
容易被忽略的兼容性和陷阱
IE8 及更早版本完全不支持 :nth-child 和 :nth-last-child，如果项目还需兼容，只能靠 JS 或预设 class 控制（如 count-2、count-3）。
现代浏览器中也常踩这几个坑：
- 父元素内存在注释节点或文本节点（哪怕只是换行空格），会影响
:nth-child计数 —— 推荐用:nth-of-type替代，它只算指定标签名 -
:nth-last-of-type(1)比:nth-last-child(1)更安全，尤其在动态插入内容或 SSR 渲染时 - 用
:nth-child(1):nth-last-child(n)做数量判断时，n 超过实际数量不会报错，但也不会匹配任何元素 —— 调试时建议先用 DevTools 查看 computed styles 确认是否命中
真正难的不是写出一个选择器，而是想清楚：你到底要响应的是“总数量”，还是“位置关系”，或是“是否存在兄弟”。选错抽象层级，后面全是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
