3

CSSドロップダウンがどのように機能するか説明してもらえますか?

私はそれらの多くを見てきました.それらのほとんどは>セレクターを持っています.

私の質問は：

>セレクターでCSSドロップダウンを作成するにはどうすればよいですか?

私は多くのチュートリアルに目を向けましたが、 > が何をするのか、そしてそれがどのように HTML classes\Ids と接続するのか理解できませんでした。

誰かが私にそれを部分的に説明してもらえますか? ありがとうございました。

4

4 に答える 4

6

直接の子を選択するために使用されます。

次のマークアップを検討してください

<div id="container">  
   <ul>  
      <li> List Item  
        <ul>  
           <li> Child </li>  
        </ul>  
      </li>  
      <li> List Item </li>  
      <li> List Item </li>  
      <li> List Item </li>  
   </ul>  
</div>

のセレクターは、IDが。のの直接の子であるを#container > ulターゲットにします。ulsdivcontainer

たとえば、ul最初のの子であるをターゲットにしませんli。

このため、子コンビネータを使用するとパフォーマンス上の利点があります。

于 2012-09-14T11:46:51.470 に答える
2

HTML:

<ul class="menu">
    <li>        
        <span>menu 1</span>
        <ul>
            <li><a href="#" >Sub 1-1</a></li>
            <li><a href="#" >Sub 1-2</a></li>
            <li><a href="#" >Sub 1-3</a></li>
        </ul>
    </li>
    <li>        
        <span>menu 2</span>
        <ul>
            <li><a href="#" >Sub 2-1</a></li>
            <li><a href="#" >Sub 2-2</a></li>
            <li><a href="#" >Sub 2-3</a></li>
        </ul>
    </li>
</ul>

CSS:

ul.menu>li{ /*Only direct children*/
    float:left;
    width: 60px;
}
ul.menu li ul{
    display:none; /*not visible*/
}

ul.menu li:hover ul{
    display:block; /* visible when hovering the parent li */
}

説明はcssにあります。

デモ:
http://jsfiddle.net/FH7Z3/

于 2012-09-14T12:04:07.417 に答える
0

これは>子セレクターです。すべての子孫を参照するのではなく、直接の子孫のみを参照します。子のみを選択し、孫などは選択したくないと見なします。

于 2012-09-14T11:59:41.163 に答える
0

CSSの>演算子は、後続の式が直接の子でなければならないことを意味します。

たとえばdiv span、DIV要素の子孫であるSPAN要素にdiv > span一致しますが、DIVの直接の子であるSPAN要素にのみ一致します。

http://www.w3schools.com/cssref/sel_element_gt.asp

于 2012-09-14T11:46:58.550 に答える