css 如何用途:has()parent-selector在父元素和子元素之间没有中介的情况下选择父元素的子元素?

sr4lhrrt  于 2023-07-01  发布在  其他
关注(0)|答案(1)|浏览(110)

我正在尝试做一些花哨的自动色彩对比度校正工作。我使用Tailwind,并试图创建一些CSS规则,当对比度太低时自动更改颜色。
假设如下:

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

简单。我们会自动将白色更改为白底黑字。每当有人指定.text-white时,他们不再需要担心另一个指定的背景颜色超出了他们的控制,会破坏WCAG可访问性指南。
然而,这正是我们的问题开始的地方。以下HTML将使白色文本难以辨认:

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

我有很多方法可以解决这个难题;但我想知道的是,是否有一种方法可以通过:has()选择器实现这一点。
我想要的东西如下:

.bg-white:not(:has(class*="bg-")) .text-white {
  color: black;
}

我希望我说的是“选择bg-white中的任何text-white,它没有任何其他类似于“bg-”的类的元素,因为这会改变背景颜色。
我的目标是使它只有最直接改变颜色的类被假定为背景颜色。

i5desfxk

i5desfxk1#

你几乎是好的。您缺少[]

.bg-white:not(:has([class*="bg-"])) .text-white {
  color: red;
}
<div class="bg-white">
  <div class="bg-black">
    <span class="text-white">I was legible until you tried to be smart</span>
  </div>
</div>

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

相关问题