css - 有没有办法用 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 等简化)。 Selectors/nthChild 中描述了 jQuery 选择器文档，以上内容可以用 $("li.mybutton:nth-child(2)").hide() 完成。