тег li не должен отображать ничего из нескольких тегов списка li

#html #css

#HTML #css

Вопрос:

Ниже приведен мой список:-

 <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;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, как я могу отобразить приведенный выше список как none

Заранее спасибо.

1. разве вы не можете присвоить какой-либо класс этим li?

2. вы можете добавить позицию в css — ul li:nth-child(4) { отображать: нет; }

3. здравствуйте @ TBI могу ли я использовать идентификатор div с ul li?

4. да, вы можете использовать идентификатор / класс div. В вашем примере используйте .box-content ul li:nth-child(4) { отображение: отсутствует; }

Ответ №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;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;
}

Живой пример

Но если вы не можете этого сделать, у вас практически нет выбора, кроме как использовать :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;
}

Живой пример

Это, конечно, скрыло бы эти элементы списка в каждом списке, поэтому вы захотите заблокировать это немного более конкретно.

Проблема с выполнением этого таким образом, конечно, в том, что если вы измените список позже, вам придется изменить эти индексы. Он хрупкий. Использование класса является более надежным.

1. Разве это не просто комбинация двух предыдущих ответов?

2. @JamesHunt: Я не знаю, когда я начал писать, ответов не было. Редактировать : похоже на это, но поскольку это более полное, я оставлю это.

Ответ №2:

CSS:

 .hidden
{
    display:none;
}

HTML:

 <li class="hidden"><a href="#">Contact Admin</a></li> <!--display none-->
<li class="hidden"><a href="#">Address Books</a></li><!--display none-->
<li class="hidden"><a href="#">Emails amp;amp; Notifications</a></li><!--display none-->
<li><a href="#">Order Now</a></li>
<li class="hidden"><a href="#">Order History</a></li><!--display none-->

Ответ №3:

Если вы хотите использовать встроенный css, вам следует добавить стиль к вашему ul элементу:

 <li style="display:none;">

в противном случае вы используете класс и устанавливаете свойство display:none;

 <style>
.hide{
  display:none;
}
</style>

<li class="hide">