显示前3个列表项并用CSS nth-child隐藏其余项

Question

是否可以使用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;
        }

Answer 1

我不知道哪个浏览器支持此功能,但您可以将公式传递给: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>