CSS:not高级用法详解

从现在开始，努力学习吧！本文《CSS :not 高级用法：精准排除元素样式》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

在网页开发中，我们经常需要对一个容器内的所有子元素应用某种通用样式，但同时希望排除其中某个特定元素及其内部的所有内容。例如，在一个包含多层嵌套 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 及其内部的
和 保持其特定样式（或不被 .container *:not(.wrapper_1) 的蓝色覆盖）。然而，container *:not(.wrapper_1) 仅排除了 .wrapper_1 元素本身。对于 .wrapper_1 内部的
和 元素，它们仍然是 .container 的后代（* 选择器会选中它们），并且它们本身并没有 wrapper_1 类，因此它们仍然会被 color: blue 的规则选中并应用样式。这导致 wrapper_1 内部的文本和元素颜色变成了蓝色，而不是我们期望的红色（或无色，由 wrapper_1 继承）。

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

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

优化后的 CSS 解决方案：

.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 内部的元素（
和 ）恰好都是其直接子元素，因此这个解决方案能够完美地实现预期效果。

实际效果：

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

注意事项与进阶思考

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 的工作原理及其在复杂选择器中的应用，能够帮助我们编写出更健壮、更易于维护的样式表。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~