如何使用:has()父选择器选择无中间背景类元素的子元素？

问题分析 #

你原本的CSS规则：

.bg-white .text-white {
  color: black;
}

能解决白色背景上白字的对比度问题，但会误修改嵌套在其他背景色（如黑色）内的白字，导致这些文本变得不可读——因为该规则会匹配所有.bg-white后代的.text-white，无论中间是否有其他背景元素。

正确实现方案 #

使用:not()伪类排除那些属于其他.bg-类元素后代的.text-white，确保仅修改最近背景为.bg-white的文本：

.bg-white .text-white:not(.bg- *) {
  color: black;
}

规则解释 #

• .bg-white .text-white：选择所有.bg-white后代的.text-white元素
• :not(.bg- *)：排除那些是任何.bg-类元素后代的.text-white——也就是说，只有当.text-white的祖先中，最近的背景类元素是.bg-white时，才会应用颜色修改。

验证效果 #

对于你的问题示例：

<div class="bg-white">
   <div class="bg-black">
      <span class="text-white">I was legible until you tried to be smart.</span>
   </div>
</div>

这里的.text-white是.bg-black的后代，会被:not(.bg- *)排除，因此保持白色，在黑色背景上依然可读。

而对于直接在.bg-white下的文本：

<div class="bg-white">
   <span class="text-white">This text will turn black for better contrast.</span>
</div>

该文本不属于任何其他.bg-元素的后代，会被规则选中，颜色改为黑色，符合WCAG对比度要求。

关于你尝试的:has()写法的问题 #

你之前写的.bg-white:not(:has(class*="bg-")) .text-white存在两个问题：

1. 语法错误：:has()内的选择器应该是.bg-而非class*="bg-"
2. 逻辑错误：该规则会选择本身没有任何.bg-后代的.bg-white元素，这意味着只要.bg-white内部有任何.bg-元素，所有其后代的.text-white都不会被修改——这不符合你的需求，因为你只是想排除那些在.bg-元素内的文本，而非整个.bg-white下的所有文本。

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