有没有办法用CSS隐藏列表中的第n项？

Question

例:

<ul class="mybuttons">
   <li class="mybutton"></li>
   <li class="mybutton"></li>
   <li class="mybutton"></li>
</ul>

是否可以使用css隐藏第二项？

Answer 1

nth-child确实是CSS方式.

在纯CSS中,语法很简单

li.mybutton:nth-child(2){
   display:none;
}

nth-of-type(2) 也适用于这种情况.

编辑:虽然这是CSS答案,如上所述,这是CSS3,仅在某些浏览器中实现.IE和FF3及以下版本不支持此功能.在FF3.5,Konqueror中实现,在Chrome,Safari和Opera中使用不正确.nth-of-type()实现更好.

旧版浏览器中的支持需要javascript(简化为jQuery等).在Selectors/nthChild文档中描述了jQuery选择器,以上可以用$("li.mybutton:nth-child(2)").hide().

Answer 2

第n个子伪选择器就是这样做的,但是它们还没有得到广泛的支持,也不会有一段时间.您将需要Javascript/jQuery或为要隐藏的项目写出特殊类或直接隐藏项目.

以下是使用jQuery的方法:

$("ul.mybuttons li:nth-child(2)").hide();