如果只有一个项目，请避免在无序列表中使用句点.纯CSS

Question

如果只有一项，有没有办法隐藏<ul>...</ul>的要点？

例如，这里我想有要点：

<ul><li>foo</li><li>bar</li></ul>

* foo
* bar

这里，我不想要一个要点：

<ul><li>foo</li></ul>

foo

有纯css解决方案吗？

Answer 1

您可以使用:only-child。

li {
list-style: disc;
}
li:only-child {
list-style: none;
}

<ul>
<li>foo</li>
<li>bar</li>
</ul>

<ul>
<li>foo</li>
</ul>

Answer 2

您可以使用:only-child或:nth-child(1):nth-last-child(1):

li:only-child {
list-style-type: none;
}

<ul><li>foo</li><li>bar</li></ul>
<ul><li>foo</li></ul>

不幸的是，使用此方法，您无法将ul作为目标，只能将li作为目标。

Answer 3

这样？

/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
list-style: none;
}

2 items
<ul>
<li>foo</li>
<li>bar</li>
</ul>
Only one
<ul>
<li>foo</li>
</ul>
3 items
<ul>
<li>foo</li>
<li>bar</li>
<li>bar</li>
</ul>
4 items
<ul>
<li>foo</li>
<li>bar</li>
<li>bar</li>
<li>bar</li>
</ul>

Answer 4

正如其他人敏锐地指出的那样，您可以使用伪CSS类。

如果说您知道示例中的第一个项目符号foo，那么一个简单的方法是first-child，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/:first-子

如果是第二个、第三个、第四个或每隔一个，请查看：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-子

针对特定<li>，请参见上文。