html - 用 CSS 隐藏 ul 中的第一个 li

Question

我有一个导航菜单，我想隐藏其中的第一项。例如

<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 项目并隐藏它？

Answer 1

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

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

Answer 2

为第一个 ul 分配一个 id，然后仅将 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

<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 5

我会考虑使用：

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

而不是：

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

Answer 6

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

css 解决方案：{parent-selector} > ul > li。

jQuery 解决方案：$("ul > li");