仅在有超过2个孩子的情况下显示

Question

是否可以更改css以仅在有超过2个孩子的情况下显示框？

例:

// Don't show
<ul>
  <li>Something</li>
</ul>

// Show
<ul>
  <li>Something</li>
  <li>Something</li>
</ul>

我只想用CSS做这件事.可能吗？

Answer 1

您可以使用:only-child选择器并隐藏li(如果它是唯一的那个).

ul li:only-child{
  display: none;
}

ul li:only-child {
  display: none;
}

<ul>
  <li>Don't Display</li>
</ul>
<ul>
  <li>Display</li>
  <li>Display</li>
</ul>

如果您想要完全满足您的要求,那么这就是JS:

let thelist = document.querySelector('.thelist')

if(thelist.childElementCount <= 1){
    thelist.remove()
}