我有一个问题,我需要解决的CSS选择器。我试图使自动颜色覆盖顺风有我们的网站始终符合WCAG准则。
我有一个我写的顺风插件,它可以自动修复这个问题--但是我意识到我针对CSS选择器的方式是关闭的。
假设有一种颜色,白色。另一种颜色-浅灰色。当在白色上施加浅灰色时,我想自动将颜色校正为黑色。
我目前正在使用以下选择器执行此操作
.bg-white .text-light-grey {
color: black;
}
然而,这引入了问题!它在这个HTML结构上工作得很好:
<div class="bg-white">
<span class="text-light-grey">This is now black.</span>
</div>
但会破坏这个结构
<div class="bg-white">
<span class="text-light-grey">This is now black.</span>
<div class="bg-black">
<span class="text-light-grey">This is also now black, but it shouldn't be - It's inside a black container!.</span>
</div>
</div>
如何修改CSS选择器,以便当它们之间指定了另一个背景时,颜色不会损坏。
就像这样
.bg-white :not(some fancy way to make sure there are no other bgs inbetween bg white and the text color) .text-light-grey {
color: black;
}
这是可能的,对吧?比如class~=
之类的
编辑:有没有人知道:has()
选择器是否可以使用它来解决这个问题?
3条答案
按热度按时间quhf5bfb1#
考虑利用级联。使用CSS变量自动级联到
bg-*
类上。这样做的好处是,它可以用于无限数量的嵌套:b09cbbtk2#
我的想法是使用两个选择器。一个以直接子元素为目标,另一个检查所有具有类的中间元素的背景颜色。在你的情况下,这就足够了吗?
编辑:如果你没有很多需要调整颜色的类,你可以考虑这样做:
zu0ti5jz3#
我用了
currentcolor
。不知道这会如何影响你的项目的其余部分,但分享它的情况下,它有助于在所有。这与@Wongjn的解决方案类似。https://play.tailwindcss.com/hQ4VW1RysN?file=css
还有一个,更类似于@Wongjn的解决方案,但如果有帮助,请分享。
https://play.tailwindcss.com/CdT0KVvQga?file=css