为何:not()条件选择器未生效？带背景类的链接被错误着色

在暗黑主题（data-bs-theme="dark"）下，我期望实现：

• 父元素不含bg-前缀类的.link-primary元素显示金色
• 带bg-类的父元素内的.link-primary保持蓝色

但实际带背景色的元素内的链接也被应用了金色，:not([class^="bg-"])选择器似乎未生效，请问哪里考虑不周？

代码示例：

<html data-bs-theme="dark">

<head>
  <style>
    .link-primary {
      color: blue;
    }
    
    .bg-light {
      background-color: #f8f9fa;
    }
    
    .bg-yellow {
      background-color: yellow;
    }
    
    [data-bs-theme="dark"] body {
      background: #333333;
    }
    
    [data-bs-theme="dark"] :not([class^="bg-"]) .link-primary {
      color: gold;
    }
  </style>
</head>

<body>
  <div class="bg-light">
    <a class="link-primary">Link in blue</a>
  </div>
  <div class="bg-yellow">
    <a class="link-primary">Link in blue</a>
  </div>
  <div>
    <a class="link-primary">Link in gold</a>
  </div>
</body>

</html>

你的选择器[data-bs-theme="dark"] :not([class^="bg-"]) .link-primary会匹配所有不带有bg-前缀类的祖先元素，而非直接父元素。比如带bg-light的div，它的父元素是body，而body没有bg-类，所以这个选择器会命中body下的所有.link-primary，直接覆盖了原本的蓝色样式。

方法1：限定直接父元素（最直接） #

使用直接子选择器>，只针对直接父元素不含bg-前缀的链接：

[data-bs-theme="dark"] :not([class^="bg-"]) > .link-primary {
  color: gold;
}

方法2：优先级覆盖（逻辑更清晰） #

先把暗黑主题下所有.link-primary设为金色，再单独给父级带bg-的链接指定蓝色，利用选择器优先级实现覆盖：

/* 基础样式 */
.link-primary {
  color: blue;
}

[data-bs-theme="dark"] body {
  background: #333333;
}

/* 暗黑主题下默认链接变金色 */
[data-bs-theme="dark"] .link-primary {
  color: gold;
}

/* 暗黑主题下，带bg-类的父元素内的链接保持蓝色（优先级更高） */
[data-bs-theme="dark"] [class^="bg-"] .link-primary {
  color: blue;
}

这种写法比用:not()更可靠，不会因为多层嵌套的祖先元素触发意外匹配。

内容的提问来源于stack exchange，提问作者CocoSkin