使用 :not(:last-child) 伪类选择器可以精准选中除最后一个子元素外的所有同级标签。该选择器会匹配所有不是其父元素最后一个子元素的元素，从而实现对目标集合的排除操作。
:not() 与 :last-child 的组合逻辑是什么
组合逻辑基于两个伪类的交集运算。:last-child 仅匹配作为父元素最后一个子节点的元素，而 :not() 则排除满足特定条件的元素。将两者结合后，浏览器引擎会遍历所有同级元素，剔除掉位于末尾的那个，保留其余部分。这种写法不依赖具体的标签名或类名，具有通用性。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<style>
li:not(:last-child) {
border-bottom: 1px solid #ccc;
}
</style>预期结果：前两个 <li> 元素应用了边框样式，第三个 <li> 元素未应用。选择器成功排除了最后一个子元素。
立即学习“前端免费学习笔记（深入）”；
如果最后一个子元素是动态生成的怎么办
动态生成不影响选择器的匹配机制。:last-child 是基于当前 DOM 树结构的实时状态判断的。只要最后一个子元素在渲染时存在，无论它是通过 JavaScript 插入还是服务器端渲染，:not(:last-child) 都会自动将其排除。无需额外处理逻辑，CSS 引擎会在布局阶段重新计算伪类状态。
<div id="container">
<p>Static</p>
</div>
<script>
document.getElementById('container').innerHTML += '<p>Dynamic</p>';
</script>
<style>
p:not(:last-child) {
color: blue;
}
</style>预期结果：第一个 <p></p> 为蓝色，第二个（动态插入的）为默认颜色。即使内容动态变化，选择器依然准确排除最新的最后一个子元素。
当容器内只有一个子元素时选择器行为如何
当容器内仅有一个子元素时，该元素既是第一个也是最后一个子元素。:last-child 匹配它，:not(:last-child) 因此无法匹配任何元素。结果是没有任何样式被应用，这符合逻辑预期，因为不存在“非最后”的子元素。
