有没有办法用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并实施only in some browsers。 IE和FF3及以下版本不支持此功能。在FF3.5，Konqueror中实现，在Chrome，Safari和Opera中使用不正确。 nth-of-type()实施更好。

旧版浏览器支持需要javascript（简体中使用jQuery等）。 jQuery选择器在Selectors/nthChild文档中描述，上述内容可以使用$("li.mybutton:nth-child(2)").hide()完成。

Answer 2

n-th child pseudo selectors这样做，但它们还没有被广泛支持，也不会有一段时间。您将需要Javascript / jQuery或为要隐藏的项目写出特殊类或直接隐藏项目。

以下是使用jQuery的方法：

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

Answer 3

ul.mybuttons li:first-child {
   display:none;
}

Answer 4

我将首先在HTML文件中设置第二个li为class =“hidden_​​li”。

示例：

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

然后我会像这样设计它：

.hidden_li{
  visibility : hidden;
  height : 0px;
  width : 0px;
  margin : 0px;
  padding : 0px;
  overflow : hidden;
}