0

次のネストされたリスト構造があります。

HTML:

<div id="my_nested_list">
    <ul>
        <li>
            Item label
            <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
                <li>Subitem 3</li>
            </ul>
        <li>
        <li>...</li>      
   </ul>
</div>

CSS:

#my_nested_list>ul {
/* first level list */
}
#my_nested_list>ul>li {
/* first level items */
}
#my_nested_list>ul>li ul {
/* second level list */
}
#my_nested_list>ul>li ul>li {
/* second level items */
}

私の問題は、の代わりにスペースセレクターを使用すると>、最初のレベルのルールが2番目のレベルに適用されることです。しかし、サポートしていないie6のサポートが必要です>。したがって、スペースを使用する必要があります。

これまでのところ、私には2つの解決策があります:

  1. すべての ul と li にクラスを配置し、使用します#my_nested_list ul.firstlevel li.firstlevel
  2. #my_nested_list ul li、およびを使用して、#my_nested_list ul li ul li不要なすべての第 1 レベルのルールを書き換えます。

もっと良いアイデアはありますか？

4

2 に答える 2

3

CSS を適切に配置することがキーワードです。

http://jsfiddle.net/wHztz/

CSS:

ul { background: red; }
ul ul { background: green }

ul li { background: yellow; margin: 10px;}
ul ul li { background: blue; }

HTML は質問と同じで、div を除いたものです。

編集：くそー、私は私の答えを投稿した後、いつも物事に気付くことになります..あなたはこの考えを持っていたようです.

リストへのクラスの追加について。クラスをulに配置するだけで済みます（気にしないでください..依存します）

Edit2:各要素でクラスを使用することを主張するが、それらを手動で追加することを本当に気にしない場合は、次のようにすることができます: http://jsfiddle.net/wHztz/5/

これにより、各 ul に順番にクラスが与えられます: ulist1、ulist2、ulist3... もちろん、ul の数に応じて異なります。

Edit3:コードを少し変更しました。

http://jsfiddle.net/wHztz/6/ - CSS で何も変更しなかったので、この例では CSS は何もしないことに注意してください。

jQuery:

   $("#my_nested_list > ul, ul ul").each(function (i) {
        i = i+1;
        $(this).addClass("list"+i).children().addClass("list"+i);
   });

これにより、次のように生成されます。

<div id="my_nested_list">
    <ul class="list1">
        <li class="list1">
            Item label
            <ul class="list2">
                <li class="list2">Subitem 1</li>
                <li class="list2">Subitem 2</li>
                <li class="list2">Subitem 3</li>
            </ul>
        </li><li class="list1">
        </li><li class="list1">...</li>      
   </ul>          
</div>

これは次のように簡単にターゲットにできます。

ul.list1 {}
li.list1 {}

ul.list2 {}
li.list2 {}

この部分を変更できることに注意してください。

$(this).addClass("list"+i).children().addClass("list"+i);

の中へ

$(this).addClass("ul"+i).children().addClass("li"+i);

そしてそれはこれに帰着します。

<div id="my_nested_list">
    <ul class="ul1">
        <li class="li1">
            Item label
            <ul class="ul2">
                <li class="li2">Subitem 1</li>
                <li class="li2">Subitem 2</li>
                <li class="li2">Subitem 3</li>
            </ul>
        </li><li class="li1">
        </li><li class="li1">...</li>      
   </ul>          
</div>
于 2011-08-01T11:51:38.550 に答える
2

問題は>セレクターではなく、IE6をサポートする必要があることです。

私の最初のアドバイスは、この古いブラウザをサポートするための要件を最小限に抑えることです。サポートを完全に削除できない場合でも、使用したいものがサポートされていないという事実を受け入れ、見た目が良くなることを確認してください。結果として悪い。IE6でまだ使用できる場合は、見た目がどんなに悪くても、作業は完了です。

ネストされたリストをスタイリングしている場合、2つのレベル間で実際に異なるスタイルを設定する必要があるメニュー構造を意味するため、このアドバイスはおそらくこの特定のケースでは役に立ちません。ただし、一般的に、IE6ではあまり汗を流さないでください。面倒な価値はありません。

IE6で動作するように新しいCSSセレクターを取得する必要がある場合は、Javascriptルートを使用することをお勧めします。古いバージョンのIEを対象とし、CSSセレクターを含むさまざまな機能のサポートをハックする優れたライブラリがいくつかあります。

頭に浮かぶ2つは次のとおりです。

  • まず、Dean Edwardsによる由緒あるIE7.js（および後続のスクリプトIE8.jsとIE9.js）。このスクリプトは何年も前から存在しており、さまざまなバージョンのIE（主にIE6）に多数の機能とバグ修正を追加しています。

  • 次に、 Selectivizrを試すことができます。これは、IEのさまざまなバージョンに欠落しているCSSセレクターを追加することに焦点を当てたはるかに新しいスクリプトです。Selectivzrは別のライブラリ（いくつかのライブラリのいずれかを使用できます）と連携して動作するため、JQueryやMooToolsなどのライブラリをすでに使用している場合は、これが適切な選択となる可能性があります。

上記の両方により、IE6は>（とりわけ）CSSセレクターを認識します。したがって、スタイルシートは、書き直す必要なしにIE6で機能します。

明らかに、これらのソリューションはどちらもJavascriptを使用して機能するため、IE6ユーザーベースがJavascriptをオフにする習慣がある場合は、サイトが壊れてしまいます。これがどれほど深刻な問題であり、何人の人々に影響を与えるかを判断するのはあなたです。

それがお役に立てば幸いです。

于 2011-08-01T19:45:23.043 に答える