:not() 伪类选择器

介绍

在 CSS 中，:not() 伪类选择器用于选择不匹配指定选择器的元素。该选择器的语法如下：

:not(selector)

其中 selector 是任意有效的 CSS 选择器。该选择器匹配所有不符合 selector 选择器的元素。

:last-child 伪类选择器

与 :not() 伪类选择器一起使用时，常常用来选择除了最后一个子元素以外的所有符合选择器的元素。:last-child 伪类选择器用于选择元素的最后一个子元素，其语法如下：

:last-child

示例

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

<div class="container">
  <h1 class="heading">标题1</h1>
  <h2 class="sub-heading">副标题 1.1</h2>
  <h2 class="sub-heading">副标题 1.2</h2>
  <h1 class="heading">标题2</h1>
  <h2 class="sub-heading">副标题 2.1</h2>
</div>

我们可以使用 :not(:last-child) 来选择除了最后一个 h1.heading 元素以外的所有符合条件的元素，代码如下：

.heading:not(:last-child) {
    margin-bottom: 1em;
}

上述代码中，选择器 .heading:not(:last-child) 表示选择所有 class 为 heading 的元素并排除最后一个元素，然后为其设置 margin-bottom: 1em 样式。

注意事项

• 如果选择器中包含多个 :not()，应该将包含更多选择器的 :not() 放在前面，以减少多余的计算。例如，应该使用 :not(.foo):not(.bar) 而不是 :not(.foo.bar)。
• 由于 :not() 伪类选择器的兼容性问题，可能无法在较老的浏览器中正常工作。建议在使用 :not() 伪类选择器时，先检查其是否被目标浏览器所支持。
• 在某些情况下，可以通过其他选择器代替 :not() 伪类选择器，以避免兼容性问题。例如，可以使用 .heading + .heading 来选择除了第一个 .heading 元素以外的所有元素。
• 在实现复杂选择器的时候，应该注意选择器的性能问题，防止出现性能不佳的情况。