html - 仅当有超过 2 个 child 时显示

Question

是否可以更改 css 以仅在有超过 2 个 child 时才显示框？

例子:

// 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>

https://jsfiddle.net/90kx009u/

---

如果您想准确完成您的要求，请使用 JS:

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

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

https://jsfiddle.net/90kx009u/2/