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

问题描述 投票:0回答:2

如果只包含一个仅使用 CSS 的元素,是否有隐藏列表的方法?奖励:想想 IE8

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

但是:

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

我正在玩所有的兄弟姐妹和下一个选择器 (

~
+
) 但是没有办法选择上一个 CSS 元素 :(

css css-selectors
2个回答
19
投票

当列表只有一项时,: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 文章的摘录:

:only-child
CSS 伪类表示任何元素 其父母的独生子。这和
:first-child:last-child
一样 或
:nth-child(1):nth-last-child(1)
,但特异性较低。

PS:正如您从 MDN 中看到的那样 浏览器支持 - IE8 不支持此功能,因此对于 IE8,纯 CSS 解决方案并不走运。


17
投票

不能隐藏list,但是如果list itemonly孩子,那么它既是first又是last孩子,所以你可以隐藏它:

li:first-child:last-child { display: none; }
© www.soinside.com 2019 - 2024. All rights reserved.