CSS :not 选择器高级应用：精确排除元素及其直接子元素样式

在网页开发中，我们经常需要对一个容器内的所有子元素应用某种通用样式，但同时希望排除其中某个特定元素及其内部的所有内容。例如，在一个包含多层嵌套 div 和 span 的结构中，我们可能希望将所有文本颜色设置为蓝色，但有一个特定类 wrapper_1 的 div 及其所有子元素（包括直接子元素和更深层嵌套的子元素）应该保持其自身定义的样式，或者不被蓝色样式覆盖。

传统 :not 选择器的局限性

考虑以下 HTML 结构和初始 CSS 尝试：

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>

初始 CSS 尝试：

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

.wrapper_1 {
  color: red;
}

.container *:not(.wrapper_1) {
  color: blue;
}

.wrapper_2 {
  color: green;
}

在这种情况下，我们期望 wrapper_1 及其内部的 <br> 和 <span> 保持其特定样式（或不被 .container *:not(.wrapper_1) 的蓝色覆盖）。然而，container *:not(.wrapper_1) 仅排除了 .wrapper_1 元素本身。对于 .wrapper_1 内部的 <br> 和 <span> 元素，它们仍然是 .container 的后代（* 选择器会选中它们），并且它们本身并没有 wrapper_1 类，因此它们仍然会被 color: blue 的规则选中并应用样式。这导致 wrapper_1 内部的文本和元素颜色变成了蓝色，而不是我们期望的红色（或无色，由 wrapper_1 继承）。

解决方案：结合使用 :not 与直接子元素选择器

为了解决这个问题，我们需要在 :not 选择器中更精确地指定排除条件，不仅排除目标元素本身，还要排除它的所有直接子元素。这样，就能有效地阻止通用样式渗透到目标元素的内部。

优化后的 CSS 解决方案：

简篇AI排版

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

554

查看详情

.wrapper_1 {
  color: red;
}

.container *:not(.wrapper_1, .wrapper_1 > *) {
  color: blue;
}

.wrapper_2 {
  color: green;
}

解析此解决方案：

1. *`.container **: 这部分选择器首先匹配.container` 元素内部的所有后代元素，无论它们的层级有多深。
2. :not(...): 这是一个否定伪类，它会从前面选中的元素集合中，排除所有匹配括号内选择器的元素。
3. .wrapper_1: 括号内的第一个选择器，它会排除掉所有带有 wrapper_1 类的元素。这确保了 div.wrapper_1 本身不会被 color: blue 影响。
4. *`.wrapper_1 > **: 括号内的第二个选择器，它会排除掉所有作为wrapper_1类的元素的 *直接子元素*。在我们的示例中，这包括了
   标签和This is the test content 3`。

通过这种组合，color: blue 的样式将应用于 .container 内除 .wrapper_1 及其所有直接子元素之外的所有后代元素。对于本教程提供的 HTML 结构，wrapper_1 内部的元素（<br> 和 <span>）恰好都是其直接子元素，因此这个解决方案能够完美地实现预期效果。

实际效果：

• <span>This is the test content 1 .</span>：显示为 蓝色。
• div.wrapper_1：显示为 红色。
• div.wrapper_1 内部的 This is the test content 2、<br> 和 <span>This is the test content 3</span>：由于它们是 wrapper_1 的直接子元素，被 :not(.wrapper_1 > *) 排除，所以它们将继承 wrapper_1 的 color: red，显示为 红色。
• <span class="wrapper_2">This is the test content 4.</span>：显示为 绿色。

注意事项与进阶思考

1. 深度嵌套的排除： 上述解决方案对于排除直接子元素非常有效。如果 wrapper_1 内部有更深层次的嵌套（例如 wrapper_1 > div > span），而您希望 所有 位于 wrapper_1 内部的元素都被排除，那么 wrapper_1 > * 将不足以涵盖 wrapper_1 > div > span。在这种情况下，:not 结合 * 可能会变得非常复杂或不可行。更常见的做法是：

   • 覆盖策略： 应用通用样式给 .container *，然后为 .wrapper_1, .wrapper_1 * 应用一个覆盖性样式（例如 color: inherit; 或 color: red;）。由于 .wrapper_1 * 具有更高的特异性，它会优先于 .container *。
   • JavaScript 辅助： 对于极其复杂的动态排除逻辑，JavaScript 可能是更灵活的选择。

2. 选择器特异性： 确保您的通用排除规则的特异性足够高，以覆盖您希望排除的元素之外的所有其他元素。同时，被排除的元素自身的样式（如 .wrapper_1 { color: red; }）的特异性也需要足以覆盖通用规则。

3. 代码可读性： 尽管 :not 可以组合多个选择器，但过度复杂的 :not 表达式可能会降低 CSS 的可读性和维护性。在追求简洁的同时，也要权衡代码的清晰度。

总结

通过巧妙地结合使用 :not 伪类和直接子元素选择器 (>)，我们可以实现对特定元素及其直接子元素的精确样式排除。container *:not(.element, .element > *) 模式是处理这类常见 CSS 样式冲突的有效且优雅的方法。在实际开发中，理解 :not 的工作原理及其在复杂选择器中的应用，能够帮助我们编写出更健壮、更易于维护的样式表。

以上就是CSS :not 选择器高级应用：精确排除元素及其直接子元素样式的详细内容，更多请关注php中文网其它相关文章！