0

同じ要素でクラスを繰り返す必要があります

<ul class='nav'>
    <li class='sub-nav'>
        ...
    </li>
    <li class='sub-nav'>
        ...
    </li>
    ...
</ul>

または、子孫セレクターを使用する必要があります .nav > li {...}

子孫セレクターを避けるために、ここにリンクの説明を入力しますが、繰り返しは良くないと思います

私は何をすべきか？

(初心者ですみません。)

4

1 に答える 1

0

li使用 descendantセレクターとセレクターをスタイリングするために同じクラスを繰り返すのではなく、必要性を理解していますchild combinator。この例を確認してください

子孫セレクターを使用する場合は、順序付けられていないリストまたはマークアップ構造で使用した要素の下にあるリスト項目を選択します。

ul.nav{
       width:500px;
        overflow:visible;
}
/*this one applies into whole li elements which cames under ul.nav*/
ul.nav li{
    background:#f8f8f8;
    line-height:30px;
    list-style:none;
    margin-bottom:5px;
    position:relative;
}

ul.nav li ul{
    position:absolute;
    top:0px;
    right:0;
    width:100px;
    z-index:5;
}

子コンビネーター セレクターを使用する場合、順序付けされていないリストまたはマークアップ構造で使用した要素の直接の子であるリスト項目のみが選択されることを意味します。これは、子の順序付けられていないリストまたは要素には影響しません。

ul.cselctor{
    margin-top:50px;

}

/*this one applies into direct childs (li) elements only which cames under ul.nav*/
ul.cselctor > li{
       background:#f00;
    line-height:30px;
    list-style:none;
    margin-bottom:5px;
    position:relative;
}
ul.cselctor > li ul{
    position:absolute;
    top:0px;
    right:0;
    width:100px;
    z-index:5;
}

これはコメントのあなたの質問です

.navこのクラスを単独で使用すると、このクラスを何にでも使用できることを意味しますdiv's, a's ,span's..など、ul.navは、順序付けられていないリスト専用であることを意味します..たとえば..a.nav{}ここでは、このnavクラスはアンカー要素にのみ使用されます。クラスはそれぞれの要素にのみ使用されます..

于 2013-11-13T14:03:56.890 に答える