Question

我有一个导航菜单，我想隐藏其中的第一项。 e.g。

<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;
}

但接下来发生的事情是导航中的所有前李项目都不相同，例如导航菜单中的“项目1”。我如何选择仅'home'li项并隐藏它？

谢谢！

Answer 1

给你的第一个ul一个类“yourclass”，然后.yourclass > li:first-child { visibility: hidden; }

要隐藏第二个ul的第一个孩子，请使用.yourclass > li > ul > li:first-child

Answer 2

将id分配给第一个ul，然后仅将css样式应用于该id？

<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

Answer 3

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;
}

请注意，没有像modernizr这样的jquery库，IE不支持nth-child来帮助它。

Answer 4

我会考虑使用：

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

而不是：

ul li:first-child{
    visibility: hidden;
}

Answer 5

<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;
   }

Answer 6

您需要第一个ul之上的元素或类，然后指定

css soluce：{parent-selector}＆gt; ul＆gt;李。

jQuery soluce：$（“ul＆gt; li”）;

使用CSS隐藏ul中的第一个li

6 个答案: