10

最初の項目を非表示にしたいナビゲーション メニューがあります。例えば

<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」のように、ナビゲーションの最初の li アイテムがすべて消えてしまいます。「ホーム」アイテムのみを選択して非表示にするにはどうすればよいですか?

4

6 に答える 6

24

最初の ul にクラス「yourclass」を指定してから、.yourclass > li:first-child { visibility: hidden; }

2 番目の ul 使用の最初の子を非表示にするには.yourclass > li > ul > li:first-child

于 2013-03-01T13:35:22.913 に答える
2

最初のulにIDを割り当ててから、そのIDにのみ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も参照してください。

于 2013-03-01T13:33:00.507 に答える
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を入れます

n番目の子を使用して上記と同じように模倣します。

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

nth-childは、modernizrのようなjqueryライブラリがないとIEでサポートされないことに注意してください。

于 2013-03-01T13:43:50.350 に答える
1 
<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;
   }
于 2013-03-01T13:39:20.173 に答える
0

私は使用を検討します：

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

それよりも：

ul li:first-child{
    visibility: hidden;
}
于 2013-03-01T13:37:46.737 に答える
0

最初の ul の上にある要素またはクラスが必要であり、次に指定します

css 解決策: {parent-selector} > ul > li.

jQuery ソリューション: $( "ul > li" );

于 2013-03-01T13:41:52.107 に答える