不是最后一个子 CSS

CSS 中的“子选择器”(>)用来选择某个元素的直接子元素，例如：

nav > ul {
  /* 选择 nav 下的 ul 元素 */
}

而有时我们需要选择的子元素并不一定是最后一个，此时就需要用到“非最后一个子选择器”(:not(:last-child))了。

语法

:not() 伪类用来选择不满足括号内条件的元素，而:last-child 伪类用来选择最后一个子元素。

因此，:not(:last-child) 用于选择不是最后一个子元素的元素。

示例

例如，我们有如下 HTML 结构：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

如果要选择除最后一个元素外的所有元素，可以这样写 CSS：

ul > li:not(:last-child) {
  /* 选择 ul 下除最后一个 li 元素外的所有 li 元素 */
  background-color: yellow;
}

效果如下：

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

注意事项

使用 :not(:last-child) 时需要注意以下几点：

• :not(:last-child) 只会选择不是最后一个子元素的元素，包括空元素。如果只有一个子元素，则不会选择任何元素。
• :not(:last-child) 的兼容性良好，但不支持 IE8 及以下版本。
• 在性能比较敏感的场景，不建议过度使用 :not(:last-child)，可以考虑其他方式实现相同的效果。

以上就是如何使用“非最后一个子选择器”选择 CSS 中的非最后一个子元素的方法，希望对你有所帮助！