CSS :not() 选择器未按预期工作（嵌套）

Question

万事如意，

我再次为:not() 苦苦挣扎，它的行为与我预期的不一样。所以我创建了下面的小提琴，让我们从同一点开始。

问题

在本示例中，如何使用 :not() 选择器将中间的链接分组（蓝色文本下方）全部设为蓝色。

参考代码

示例前言：这是一个简化的示例。我不是在找人说“伙计，你可以移动 .red 类，它会像你想要的那样工作。完全没有 :not()。” ...我正在尝试在这里解决:not()。

测试示例 - https://jsfiddle.net/2tbwkcyg/1/

结构是

<div> <!-- control group | green -->
    Green<br>
    <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
    <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
    Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
</div> <!-- /control group | green -->
<div class="red">
  <div class="blue">
    Blue<br>
    <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
    <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
    Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
  </div> <!-- /blue -->
  <div>
    Red<br>
    <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
    <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
    Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
  </div>
</div> <!-- /red -->

而（相关的）CSS 是

a{color:green}
.blue a{color:blue}
.red :not(.blue) a{color:red}

预期结果

由于 CSS 中的最后一行，我希望中间的链接组是蓝色的，因为 - 它在 .red 部分中，并且它们在 .blue 类中。

因此，预期的结果是：

• 六个绿色链接
• 六个蓝色链接
• 六个红色链接 也就是说，每种颜色三 x 两。

实际结果

但是有了那个 CSS，我得到：

• 六个绿色链接
• 四个红色链接+两个蓝色链接
• 六个红色链接

我在 StackOverflow 上尝试了许多解决方案和建议，例如用双引号将选择器包裹在 :not() 内，在 :not() 之前使用 * 等。但这些似乎都不起作用。 （顺便说一句，这些都没有在定义中注明：https://developer.mozilla.org/en-US/docs/Web/CSS/:not）

兴趣点：我刚刚放入了另一行（Direct 行），这似乎暗示:not() 部分必须紧接在选择的下一个元素 - 因为它们显示为蓝色。而下一层的则没有。

浏览器兼容性

所有主要的浏览器都在这个桌面上。

IE、Opera Mobile、QQ、百度浏览器不在考虑范围内。

提前致谢！ :)

-- 编辑--

@robby-cornelissen 指出我在上面链接的 MDN 文章中说：

这个选择器只适用于一个元素；你不能用它来排除所有的祖先。例如，body :not(table) a 仍将适用于 <table> 内的链接，因为 <tr> 将匹配选择器的 :not() 部分。

这很可悲。因为这就是我想要的。我想在定义类/选择器和主题之间有一个否定类/选择器，以防止规则应用 - 而不是设置/覆盖多行。

@kmoser 确实设法使用> 使这首歌唱了一点。似乎如果您将:not()“绑定”到直接父级，它会起作用并覆盖:not()与直接子级的隐含关系。

Answer 1

：没有按预期工作（好吧，恕我直言）。

当你设置时：

.red :not(.blue) a {
  color: red;
}

您是在说“当您找到一个带有红色类的元素时，请在任何没有蓝色类的子、孙、曾孙等元素中建立任何链接，以将其设为红色”。

因此选择了作为蓝色 div 子级的 div 和 nav。

那么我们可能会质疑选择性和级联。

原来是这样

.red :not(.blue) a {
  color: red;
}

和

.red .blue a {
  color: blue
}

具有相同的权重选择性（这对我来说似乎是合乎逻辑的）。

所以这是你的代码，但是这两个设置互换了：

a {
  color: green
}

.red :not(.blue) a {
  color: red;
}

.red .blue a {
  color: blue
}

<div>
  <!-- control group | green -->
  Green<br>
  <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
  <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
  Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
</div>
<!-- /control group | green -->
<div class="red">
  <div class="blue">
    Blue<br>
    <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
    <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
    Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
  </div>
  <!-- /blue -->
  <div>
    Red<br>
    <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
    <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
    Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
  </div>
</div>
<!-- /red -->

Answer 2

我认为标签不在 div 中，它在 nav 中，所以我们可以使用

.red :not(.blue) nav a { color: red }

或者你可以为蓝色而不是红色创建另一个 div