html - li 标签不应显示多个 li 列表标签中的任何内容

Question

以下是我的 list :-

<div class="box">
  <div class="box-heading">Menu</div>
  <div class="box-content">
    <ul>
            <li><a href="#">My Account</a></li>
            <li><a href="#">Edit Account</a></li>
            <li><a href="#">Password</a></li>
            <li><a href="#">Contact Admin</a></li> <!--display none-->
            <li><a href="#">Address Books</a></li><!--display none-->
            <li><a href="#">Emails &amp; Notifications</a></li><!--display none-->
            <li><a href="#">Order Now</a></li>
            <li><a href="#">Order History</a></li><!--display none-->
            <li><a href="#">Pending Orders</a></li>
            <li><a href="#">Current Orders</a></li>
            <li><a href="#">Completed Orders</a></li>

            <li><a href="#">Downloads</a></li>//display none
            <li><a href="#">Newsletter</a></li>//display none
            <li><a href="#">Logout</a></li>
          </ul>
  </div>
</div>

我不想显示以下列表:-

联系管理员

• 地址簿

• 电子邮件和通知

• 订单历史

• 下载

• 时事通讯

使用CSS我如何将上面的列表显示为无

提前致谢。

Answer 1

最灵活的解决方案是向要隐藏的列表项添加一个类，例如:

<li><a href="#">My Account</a></li>
<li><a href="#">Edit Account</a></li>
<li><a href="#">Password</a></li>
<li class="foo"><a href="#">Contact Admin</a></li> <!--display none-->
<li class="foo"><a href="#">Address Books</a></li><!--display none-->
<li class="foo"><a href="#">Emails &amp; Notifications</a></li><!--display none-->
<li><a href="#">Order Now</a></li>
<li class="foo"><a href="#">Order History</a></li><!--display none-->
<li><a href="#">Pending Orders</a></li>

然后

.foo {
    display: none;
}

Live Example

但如果你做不到这一点，你几乎别无选择，只能使用 :nth-child (计数从 1 开始，与大多数编程内容不同):

ul li:nth-child(4),
ul li:nth-child(5),
ul li:nth-child(6),
ul li:nth-child(8) {
    display: none;
}

Live Example

当然，这会隐藏每个列表中的这些列表项，因此您需要更具体地锁定它。

这样做的问题当然是，如果稍后修改列表，则必须更改这些索引。很脆弱。使用类更加健壮。