0

ネストされたリストの前のレベルだけをスタイル設定することは可能かどうか疑問に思います。私が何を意味するかを理解するには、このフィドルを見てください。

http://jsfiddle.net/MYasJ/

フィドルでは、ネストされたリストプロパティをオーバーライドすることで目的の効果を得ることができますがbackground-color、これは私が望むものではありません-私の特定の状況では、親リストには背景として画像があり、第1レベルのli要素には赤い背景が必要ですが、要素「ルート」リストの背景が表示されるように、ネストされたリストのは再び透明にする必要があります。フィドルでは絵の代わりに緑色を使用していますが、あなたがそのアイデアを理解してくれることを願っています。

SOにはいくつかの質問がありますが、たとえばここにありますが、それらは異なるトピックをカバーするか、解決策に子のプロパティをオーバーライドすることが含まれます-しかし、これは私の場合を解決しません。

編集：少し詳しく説明します：問題は、ネストされたリストが親li要素内に含まれているためです。liこれにはいくつかの理由があります（たとえば、親要素をフロートすると、ネストされたリストも一緒にフロートされます）が、要素のみをスタイル設定できないという結果もあります（少なくとも方法がわかりません、これが私の質問です）。。疑似クラスで運が良かったのですが、これは明らかに複数行のアイテムでは機能せず、要素:first-lineの幅全体に及ぶこともありません。li

4

1 に答える 1

1

HTMLコードでは、"Only this item should have red background"テキストノードとネストされたノードの両方<ul>が親の子です<li>。したがって、それらは赤い背景に表示されます。

テキストをに折り返し、<div>背景色を割り当てることができます。

<ul id="nav">
    <li>
        <div>Only this item should have red background</div>
        <ul>
            <li>But this item should have no background</li>
            <li>Just like this one</li>
            <li>So the green background of the root ul element is visible</li>
       </ul>
    </li>
</ul>

#nav > li > div {
    background-color: red;
}
于 2013-01-30T23:18:47.367 に答える