使用纯CSS隐藏包含一个元素的列表

Question

有没有办法隐藏列表,如果它只包含一个元素只使用CSS？奖励:想想IE8

<ul>
  <li>hide this</li>
<ul>

但:

<ul>
  <li>show this</li>
  <li>and others...</li>
</ul>

我正在玩所有兄弟姐妹和下一个选择器(~ +)但没有办法选择以前的CSS元素:(

Answer 1

你不能隐藏列表,但是如果列表项是是唯一的孩子,那么它既是第一个和最后一个孩子,所以你可以隐藏有:

li:first-child:last-child { display: none; }

Answer 2

有一个伪类: :only-child(MDN)

所以,如果我有以下CSS

li:only-child {
    display: none;
}

..如果有多个列表项,则仅显示列表项.

小提琴

(注意:像Quentin所说的那样,它并没有隐藏实际的列表 - 只是当它是唯一的子项时的列表项...但只要列表本身没有自己的样式,这将与隐藏相同列表)

以下是上述MDN文章的摘录:

在:only-childCSS伪类表示这是其父母唯一的孩子的任何元素.这与:first-child:last-child 或相同:nth-child(1):nth-last-child(1),但具有较低的特异性.

PS:正如您从MDN 浏览器支持中看到的那样- IE8不支持这一点,因此对于IE8而言,您对纯CSS解决方案感到不满.