Скрыть первый li в ul с помощью CSS

у меня есть навигационное меню, которое я хотел бы скрыть первый элемент в нем. например,

<ul>
   <li>Home</li>
   <li>About</li>
   <li>
      <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
   </li>
</ul>

затем я скрываю первый элемент, как это в CSS:

li:first-child{
   visibility: hidden;
}

но тогда происходит то, что все первые элементы li в навигации не выражаются, например "пункт 1" в меню навигации. Как бы я выбрал только элемент "home" li и скрыть его?

спасибо!

6
css css3 html

6 ответов

дайте вашему первому ul класс "yourclass", затем .yourclass > li:first-child { visibility: hidden; }

чтобы скрыть первого ребенка второго ul используйте .yourclass > li > ul > li:first-child

18

назначьте идентификатор первому ul, а затем примените стиль css только к этому идентификатору?

<ul id="someid">
   <li>Home</li>
   <li>About</li>
   <li>
      <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
   </li>
</ul>

#someid > li:first-child{
   visibility: hidden;
}

Также см. http://www.w3.org/TR/CSS2/selector.html

2
ul > li:first-child { (note you can do :last-child to target the last item)
display: none;
}

другой вариант, особенно если вам нужно нацелиться на других детей по другим причинам, это использовать: nth-child (). Внутри скобок вы ставите число http://www.w3schools.com/cssref/sel_nth-child.asp

использование nth-child для имитации того же, что и выше.

ul > li:nth-child(1) {
display: none;
}

обратите внимание, что nth-child не поддерживается IE без библиотеки jquery, такой как modernizr, чтобы помочь ему.

1

вам понадобится элемент или класс, который находится выше первого ul, затем укажите

CSS soluce: {Родительский селектор} > ul > li.

jQuery soluce: $ ("ul > li");

0

Я бы рассмотрел использование:

body> ul>:first-child {
    display: none;
}

вместо:

ul li:first-child{
    visibility: hidden;
}
0
<ul id="abc">
  <li>Home</li>
  <li>About</li>
  <li>
  <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
  </ul>
</li>
</ul>
  #abc > li:first-child{
   display: none;
   }
0