如何显示前3个列表项，并用CSS nth-child隐藏其余项？
如何显示前3个列表项，并用CSS nth-child隐藏其余项？
提问于 2012-08-08 01:51:49
是否可以使用CSS选择器选择超过定义数量的多个子项？
我想隐藏#3之后的所有列表项：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li> <!-- hide this -->
<li>5</li> <!-- hide this -->
</ul>
<style>
ul li:nth-child(X) {
display: none;
}
</style>
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-08-08 01:56:15
我不知道哪个浏览器支持此功能，但您可以将公式传递给:nth-of-type()：
ul li:nth-of-type(1n+4) {display: none;} /* should match your case */更多详细信息请访问：http://www.w3schools.com/cssref/sel_nth-of-type.asp
编辑
我将它从(n+4)改为(1n+4)，因为第一个版本可以工作，但无效。我在媒体查询中使用它来隐藏小屏幕上的剪切项目。
示例：
b:nth-of-type(1n+4){ opacity:.3; }<b>1</b>
<b>2</b>
<b>3</b>
<b>4</b>
<b>5</b>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11851395
复制相关文章
相似问题