显示前3项列表,并使用css n-子项隐藏其余项。

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (129)

是否可以使用CSS选择器选择多个超过定义数字的子项?

我想隐藏过去#3的所有列表项目:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li> //hide this
<li>5</li> //hide this
</ul>

ul li:nth-child(X) {  
          display:none;
        }
提问于
用户回答回答于

我不知道哪个浏览器支持这一点,但你可以传递一个公式:nth-​​of-type():

ul li:nth-of-type(1n+4) {display: none;} /* should match your case */

自第一版起作用以后,我将它从(n + 4)改为(1n + 4),但无效。我在媒体查询中使用它来隐藏较小屏幕上的剪切项目。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励