如何在CSS中精准选择除最后一个子元素外的所有同级标签-css教程-PHP中文网

使用 :not(:last-child) 伪类选择器可以精准选中除最后一个子元素外的所有同级标签。该选择器会匹配所有不是其父元素最后一个子元素的元素，从而实现对目标集合的排除操作。

如何在CSS中精准选择除最后一个子元素外的所有同级标签

`:not()` 与 `:last-child` 的组合逻辑是什么

组合逻辑基于两个伪类的交集运算。:last-child 仅匹配作为父元素最后一个子节点的元素，而 :not() 则排除满足特定条件的元素。将两者结合后，浏览器引擎会遍历所有同级元素，剔除掉位于末尾的那个，保留其余部分。这种写法不依赖具体的标签名或类名，具有通用性。

如何在CSS中精准选择除最后一个子元素外的所有同级标签

Item 1
Item 2
Item 3

预期结果：前两个

元素应用了边框样式，第三个

元素未应用。选择器成功排除了最后一个子元素。

如果最后一个子元素是动态生成的怎么办

动态生成不影响选择器的匹配机制。:last-child 是基于当前 DOM 树结构的实时状态判断的。只要最后一个子元素在渲染时存在，无论它是通过 JavaScript 插入还是服务器端渲染，:not(:last-child) 都会自动将其排除。无需额外处理逻辑，CSS 引擎会在布局阶段重新计算伪类状态。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

如何在CSS中精准选择除最后一个子元素外的所有同级标签

<div id="container">
  <p>Static</p>
</div>

<script>
document.getElementById('container').innerHTML += '<p>Dynamic';
</script><style>
p:not(:last-child) {
  color: blue;
}
</style>

预期结果：第一个

为蓝色，第二个（动态插入的）为默认颜色。即使内容动态变化，选择器依然准确排除最新的最后一个子元素。