我可以使用CSS来基于子元素计数应用样式吗？ [英] Can I use CSS to apply styles based on child element count?

问题描述

我有一种情况，其中 n 元素可以存在，任何可以删除。但是在只有一个元素的地方，应该禁用删除（最好是通过设置 display：none ）：

I have a situation where n elements can be present and any can be deleted. But at the point where only one element is present, the deletion should be disabled (ideally by setting display:none):

只有一个项目：

我的问题是如果我可以这样做：

My question is if I can do something like this:

DIV.items:ONLY_ONE_CHILD DIV.item BUTTON.delete {
   display:none;
}

不可接受的答案，但在这种情况下，我想知道

No is an acceptable answer but in that case I'd like to know about the closest possibility or potentional future options.

推荐答案

您可以选择未来选项 t在父级（ DIV.items ）上指定它，但你可以在子级（ DIV.item ） ：only-child 伪类。由于您在这里为子女的后代设计样式，您所要做的事实上是可能的：

You can't specify it on the parent (DIV.items), but you can on the child (DIV.item) with the :only-child pseudo-class. Since you're styling a descendant of the child here, what you're looking to do is in fact possible:

DIV.item:only-child BUTTON.delete {
    display: none;
}

这篇关于我可以使用CSS来基于子元素计数应用样式吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！