我正在尝试做一些花哨的自动色彩对比度校正工作。我使用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-”的类的元素,因为这会改变背景颜色。
我的目标是使它只有最直接改变颜色的类被假定为背景颜色。
1条答案
按热度按时间i5desfxk1#
你几乎是好的。您缺少
[]