显示前 3 个列表项并使用 CSS nth-child 隐藏其余项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11851395/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying the first 3 list items and hiding the rest with CSS nth-child
提问by Yahreen
Is it possible to select multiple children past a defined number with CSS selectors?
是否可以使用 CSS 选择器选择超过定义数字的多个孩子？
I'd like to hide all list items past #3:
我想隐藏 #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;
}
回答by DerWaldschrat
I do not know which browser supports this, but you can pass a formula to :nth-of-type():
我不知道哪个浏览器支持这个，但是你可以给 :nth-of-type() 传递一个公式：
ul li:nth-of-type(1n+4) {display: none;} /* should match your case */
Further details on: http://www.w3schools.com/cssref/sel_nth-of-type.asp
更多详情请访问：http: //www.w3schools.com/cssref/sel_nth-of-type.asp
Edit
编辑
I altered it from (n+4) to (1n+4) since the first version works but isn't valid. I use this in media queries to hide cut-down items on smaller screens.
由于第一个版本有效但无效，因此我将其从 (n+4) 更改为 (1n+4)。我在媒体查询中使用它来隐藏较小屏幕上的缩减项。
Example:
例子：
b:nth-of-type(1n+4){ opacity:.3; }<b>1</b>
<b>2</b>
<b>3</b>
<b>4</b>
<b>5</b>