精准CSS选择：利用:not组合选择器排除特定元素及其直接子元素

理解CSS :not 伪类选择器

css中的:not伪类选择器是一个否定伪类，它允许我们选择不匹配其参数中指定选择器的元素。它提供了一种强大的反向选择机制，使得样式规则的编写更加灵活。例如，div:not(.special) 会选中所有不带有 .special 类的 div 元素。然而，当需要排除一个元素 及其所有嵌套子元素 时，直接使用 :not 可能会遇到一些挑战。

挑战：如何排除一个元素及其所有后代？

在Web开发中，我们经常遇到这样的需求：希望对一个父容器内的所有子元素应用某种通用样式，但需要排除其中一个特定子元素及其内部的所有嵌套内容。一个常见的误解是，container *:not(.wrapper) 能够排除 .wrapper 元素及其所有后代。实际上，*:not(.wrapper) 只会排除 自身 带有 .wrapper 类的元素。对于 .wrapper 内部的子元素，只要它们自身不带有 .wrapper 类，它们仍然会被 container * 选中，并不会被 :not(.wrapper) 排除。

考虑以下HTML结构示例：

<div class="container">
  <div>
    <div>
      <div>
        <span>This is the test content 1 .</span>
      </div>
      <div class="wrapper_1">
        This is the test content 2
        <br>
        <span>This is the test content 3</span>
      </div>
      <span class="wrapper_2">This is the test content 4.</span>
    </div>
  </div>
</div>

如果我们的目标是让 .container 内除了 .wrapper_1 及其所有后代之外的所有元素显示蓝色，而 .wrapper_1 及其后代显示红色，那么简单的 .container *:not(.wrapper_1) 将无法达到预期。例如，wrapper_1 内部的 <span>This is the test content 3</span> 元素自身没有 .wrapper_1 类，因此它仍会被 *:not(.wrapper_1) 选中，从而可能被赋予蓝色。

解决方案：:not 组合选择器详解

为了实现更精确的排除，我们可以利用 :not 伪类接受逗号分隔的选择器列表的特性。通过组合多个选择器作为 :not 的参数，我们可以同时排除目标元素本身及其直接子元素。

立即学习“前端免费学习笔记（深入）”；

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

有效的CSS解决方案如下：

/* 为 wrapper_1 及其后代设置默认颜色 */
.wrapper_1 {
  color: red;
}

/* 排除 wrapper_1 及其直接子元素，对其他容器后代应用蓝色 */
.container *:not(.wrapper_1, .wrapper_1 > *){
  color: blue;
}

/* 特殊元素 wrapper_2 设置绿色 */
.wrapper_2 {
  color: green;
}

让我们详细解析这个解决方案的工作原理：

1. *`.container **: 这部分是基础选择器，它会匹配.container元素内的所有后代元素，无论是div、span` 还是其他任何标签。
2. :not(...): 这是一个否定伪类，用于从 container * 匹配到的元素中排除掉其内部指定选择器所匹配的元素。
3. .wrapper_1: 作为 :not 的第一个参数，它确保了所有自身带有 wrapper_1 类的元素（即 <div class="wrapper_1">）不会被 color: blue 的规则选中。
4. *`.wrapper_1 > **: 作为:not的第二个参数，它进一步排除了所有直接作为.wrapper_1子元素的元素。在我们的示例中，
   内部的
   和This is the test content 3都是它的直接子元素，因此它们也不会被color: blue` 的规则选中。

   通过这种组合，我们有效地将 .wrapper_1 元素本身及其所有直接子元素从 color: blue 的规则中排除。由于 .wrapper_1 自身被设置为 color: red，并且CSS的继承机制，其内部的子元素（包括那些被 wrapper_1 > * 明确排除的直接子元素）会继承 red 颜色。而其他不属于 .wrapper_1 或其直接子元素的 .container 后代则会显示 blue。

   示例应用与最终效果

   结合上述HTML和CSS，我们可以观察到以下样式效果：

   • <span>This is the test content 1 .</span>: 这是一个 .container 的后代。它既不是 .wrapper_1 元素，也不是 .wrapper_1 的直接子元素。因此，它匹配 *:not(.wrapper_1, .wrapper_1 > *)，最终显示 蓝色。
   • <div class="wrapper_1">...</div>: 这个元素自身带有 .wrapper_1 类，因此匹配 .wrapper_1 规则，显示 红色。同时，它被 :not(.wrapper_1, ...) 排除，不会受到 blue 规则的影响。
   • <span>This is the test content 3</span>: 这个 span 是 .wrapper_1 的直接子元素。它被 :not(..., .wrapper_1 > *) 排除，不会受到 blue 规则的影响。由于其父元素 .wrapper_1 的颜色是红色，它会继承显示 红色。
   • <span class="wrapper_2">This is the test content 4.</span>: 这个元素自身带有 .wrapper_2 类，因此匹配 .wrapper_2 规则，显示 绿色。虽然它也匹配 *:not(...) 规则（因为它既不是 .wrapper_1 也不是其直接子元素），但 .wrapper_2 的类选择器具有更高的特异性，因此 green 颜色会覆盖 blue。

   注意事项与最佳实践

   • :not 的作用范围: 务必记住 :not 伪类只能排除 匹配自身 的元素，不能直接排除一个元素的整个子树。本教程中的解决方案是利用了 :not 接受多个参数以及CSS继承的特性，来达到特定场景下的排除效果。
   • CSS 特异性 (Specificity): 当多个CSS规则可能作用于同一个元素时，具有更高特异性的规则将优先应用。在上述示例中，.wrapper_2 的规则之所以能覆盖 *:not(...) 规则，就是因为类选择器通常比通用选择器结合伪类具有更高的特异性。
   • 代码可读性与维护: 复杂的 `:

以上就是精准CSS选择：利用:not组合选择器排除特定元素及其直接子元素的详细内容，更多请关注php中文网其它相关文章！