0

CSS3 セレクターを使用して親 li のみを選択する方法を教えてください。たとえば、以下のメニュー ナビゲーションでは、上位レベル (MainMenu 値を持つ親) のすべての li にスタイルを適用する方法を教えてください。

<ul>
<li>MainMenu 1
    <ul class="nav">
        <li>SubMenu 1</li>
        <li>SubMenu 2</li>
        <li>SubMenu 3</li>
        <li>SubMenu 4</li>
    <ul>
</li>
<li>MainMenu 2</li>
<li>MainMenu 3</li>
<li>MainMenu 4</li>
</ul>

御時間ありがとうございます

4

1 に答える 1

1

id親ulまたはそれをラップする要素にを与え、それulに基づいて選択しid、それらの属性をオーバーライドして、liそれらの子孫要素を「リセット」する必要がありますli。

#idOfUl​ > li {
    /* selects first-level li elements */
    color: #f00;
}

#idOfUl > li li {
    /* selects the li descendants of the first-level li elements */
    color: #000;
}
​

JS フィドルのデモ。

OPによって提起された問題に対処するために*を編集しました（この回答へのコメントで）：

class私の [問題] は [その]またはidリストに割り当てられないことです。

それを考えると、次のように、単にすべての li要素のスタイルをli設定してから、 から派生した のスタイルをオーバーライドすることをお勧めliします。

li {
    color: #f00;
}

li li {
    color: #000;
}
​

JS フィドルのデモ。

これを過度に複雑にし、否定疑似セレクターを使用して第 1 レベルのli要素をスタイルすることもできます。事実上、これは、それ自体が要素以外の要素の直接の子である要素の直接の子である直接liの子要素を選択します。ulli

*:not(li) > ul > li {
    color: #f00;
}

li li {
    color: #000;
}
​

JS フィドルのデモ。

于 2012-12-04T07:57:00.900 に答える