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

Question

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

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

可是：

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

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

Answer 1

您can't hide the list，但如果列表项是仅子项，那么它就是first和{{3} } child，所以你可以用以下内容隐藏它：

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

Answer 2

有一个伪类：:only-child（ MDN ）

所以，如果我有以下CSS

li:only-child {
    display: none;
}

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

<强> FIDDLE

（注意：像Quentin所说的那样，它并没有隐藏实际的列表 - 只有当它是唯一的子项时才是列表项...但只要列表本身没有自己的样式，这就是与隐藏列表相同）

此处还有上述MDN文章的摘录：

  

:only-child CSS伪类表示任何元素   只有其父母的孩子。这与:first-child:last-child相同   或:nth-child(1):nth-last-child(1)，但具有较低的特异性。

PS：正如您从MDN Browser support所看到的那样 - IE8不支持这一点，因此对于IE8而言，对于纯CSS解决方案来说，运气不佳。