CSS 选择器除最后一个之外的每个子元素

在 CSS 中，我们可以使用选择器来选取一个或多个 HTML 元素，从而为这些元素应用样式。当我们需要选择除最后一个之外的每个子元素时，可以使用 CSS 伪类选择器 :not()。

语法

:not(:last-child) 选择器可以选取除了最后一个子元素以外的所有子元素。

示例

HTML 结构

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
</ul>

CSS 样式

/* 选取除了最后一个子元素以外的所有子元素 */
li:not(:last-child) {
  color: red;
}

渲染结果

• 第一项
• 第二项
• 第三项
• 第四项

其中，第一至第三项的字体颜色会变成红色，而第四项的字体颜色则不会受到样式的影响。

总结

使用 :not(:last-child) 选择器可以方便地选取除了最后一个子元素以外的所有子元素。这种方法在设计网格或列表时特别有用，可以有效地控制元素间的间隔和间距。