如果只包含一个仅使用 CSS 的元素,是否有隐藏列表的方法?奖励:想想 IE8
<ul>
<li>hide this</li>
<ul>
但是:
<ul>
<li>show this</li>
<li>and others...</li>
</ul>
我正在玩所有的兄弟姐妹和下一个选择器 (
~
+
) 但是没有办法选择上一个 CSS 元素 :(
当列表只有一项时,:has 伪类 可用于完全隐藏列表(相对于仅隐藏列表项)。
选择器可以用多种方式编写..这里有两个:
ul:not(:has(:nth-child(2))) {
display: none
}
ul:not(:has(li + li)) {
display: none
}
.demo1 ul:not(:has(:nth-child(2))) {
display: none
}
.demo2 ul:not(:has(li + li)) {
display: none
}
<div class="demo1">
<ul>
<li>one</li>
</ul>
<ul>
<li>one</li>
<li>two</li>
</ul>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<hr />
<div class="demo2">
<ul>
<li>one</li>
</ul>
<ul>
<li>one</li>
<li>two</li>
</ul>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
浏览器支持
:has
- caniuse
为此有一个伪类:
:only-child
(MDN)
所以如果我有以下 CSS
li:only-child {
display: none;
}
.. 列表项只有在有多个列表项时才会显示。
(注意:就像 Quentin 所说的那样,它不会隐藏实际的列表 - 当它是唯一的孩子时只是列表项......但只要列表本身没有自己的样式,这将与隐藏列表)
这里还有上面 MDN 文章的摘录:
CSS 伪类表示任何元素 其父母的独生子。这和:only-child
一样 或:first-child:last-child
,但特异性较低。:nth-child(1):nth-last-child(1)
PS:正如您从 MDN 中看到的那样 浏览器支持 - IE8 不支持此功能,因此对于 IE8,纯 CSS 解决方案并不走运。