CSS 有没有办法用CSS隐藏列表中的第n个项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1395246/
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
Is there a way to hide the nth item in a list with CSS?
提问by GollyJer
Example:
例子：
<ul class="mybuttons">
<li class="mybutton"></li>
<li class="mybutton"></li>
<li class="mybutton"></li>
</ul>
Is it possible to hide the 2nd item using css?
是否可以使用 css 隐藏第二项？
回答by b w
nth-childis indeed the CSS way.
nth-child确实是 CSS 方式。
In pure CSS, the syntax is simply
在纯 CSS 中，语法很简单
li.mybutton:nth-child(2){
display:none;
}
nth-of-type(2)works in this case too.
nth-of-type(2)在这种情况下也有效。
Edit: Though this is the CSS answer, as noted, this is CSS3 and implemented only in some browsers. IE and FF3 and below do not support this natively. Implemented in FF3.5, Konqueror, and incorrectly in Chrome, Safari, and Opera. nth-of-type()implementations are better.
编辑：虽然这是 CSS 答案，但如前所述，这是 CSS3 并且仅在某些浏览器中实现。IE 和 FF3 及以下版本本身不支持此功能。在 FF3.5、Konqueror 中实现，在 Chrome、Safari 和 Opera 中错误地实现。nth-of-type()实现更好。
Support in older browsers will require javascript (simplified with jQuery, et al). jQuery selector is described in the Selectors/nthChilddocs, and the above can be accomplished with $("li.mybutton:nth-child(2)").hide().
旧浏览器的支持需要 javascript（用 jQuery 等简化）。jQuery 选择器在Selectors/nthChild文档中有描述，上面的可以用$("li.mybutton:nth-child(2)").hide().
回答by Jon Galloway
n-th child pseudo selectorsdo this, but they're not widely supported yet and won't be for a while. You'll either need Javascript / jQuery or to write out a special class for the items you want to hide or just hide the items directly.
第 n 个子伪选择器会这样做，但它们还没有得到广泛支持，并且不会有一段时间。您要么需要 Javascript / jQuery，要么为要隐藏的项目写出一个特殊的类，或者直接隐藏这些项目。
Here's how you'd do it with jQuery:
以下是您使用 jQuery 进行的操作：
$("ul.mybuttons li:nth-child(2)").hide();
回答by Sumith Harshan
ul.mybuttons li:first-child {
display:none;
}
回答by Mateo
I will first set up the second li as class="hidden_li"in the HTML file.
我将首先在 HTML 文件中将第二个 li设置为 class="hidden_li"。
Example:
例子：
<ul class="mybuttons">
<li class="mybutton"></li>
<li class="mybutton" class="hidden_li"></li>
<li class="mybutton"></li>
</ul>
Then I will style it like this :
然后我会像这样设计它：
.hidden_li{
visibility : hidden;
height : 0px;
width : 0px;
margin : 0px;
padding : 0px;
overflow : hidden;
}
