css - 基于有多少元素的样式元素仅使用 CSS？

Question

我需要根据包含的 div 中的标签数量来设置标签样式。

示例代码:

<div class="wrapper">
 <label class="checkout-item-promo" />
</div>

<div class="wrapper">
 <label class="checkout-item-promo" />
 <label class="checkout-item-promo" />
</div>

对于第二个 div，我需要使用 CSS3 的 :before 功能在标签前面添加元素符号，但我只希望它在包装器中有多个标签时发生。

有人有关于使用仅 CSS 实现此功能的任何提示或技巧吗？

Answer 1

您可以将选择器 :only-child 与 :not 结合使用。据我了解，如果 div 中有超过 1 个标签，您希望将元素符号添加到所有标签，否则(只有 1 个标签)不应添加元素符号。所以你可以试试这个 CSS:

div.wrapper > .checkout-item-promo:not(:only-child):before {
  content:'* ';    
} 

Demo.