英文:
How to combine multiple arbitrary values such as :has in Tailwind
问题
在纯CSS中，你可以这样实现：
&:not(:has(*)){
display: none
}
然而，在Tailwind CSS中，我无法找到相应的方法。我尝试了一些方法，比如下面的方式，但都无法正常工作：
[&:not(:has(*)):hidden]
[&:not([&:has(*)]):hidden]
是否有一种方法可以结合多个任意值？
英文:
I have a problem where I want an element to not show, if it has children.
In plain CSS this is:
&:not(:has(*)){
display: none
}
However, in Tailwind I can not figure it out. I've tried few things such as below, but none would work:
[&:not(:has(*)):hidden]
[&:not([&:has(*)]):hidden]
Is there a way to combine multiple arbitrary values?
答案1
得分: 1
你的语法不正确 - 你希望附加到变体的类位于方括号之外：
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<div class="[&]:not(:has(*)):hidden">
Foo
</div>
<div class="[&]:not(:has(*)):hidden">
<div>Bar</div>
</div>
<!-- end snippet -->
英文:
Your syntax is incorrect – you'd want the class attached to the variant to be outside the square brackets:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<div class="[&:not(:has(*))]:hidden">
Foo
</div>
<div class="[&:not(:has(*))]:hidden">
<div>Bar</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论