1

ウェブショップ向けの CMS を使用します。プラットフォームは現在、次のようなメニューのリストを生成しています:

<ul class="menu">
<li class="item*">
  Category 1
    <ul class="level 1">
        <li class="item*">Item 1</li>
        <li class="item*">Item 2</li>
        <li class="item*">Item 3</li>
    </ul>
</li>
<li class="item*">Category 2</li>
<li class="item*">Category 3</li>
</ul>

このリストに箇条書きを追加したいのでli:before、 content:url(image.png) を使用して使用することを考えていました。

問題は、「カテゴリ」と「アイテム」に異なる画像が必要なことです。これをどのように削除できますか?

試しul.menu li:beforeてみましたが、それはツリー内のすべての li を選択します。li で生成されるクラスは、私が制御することはできません。li´s で生成されたクラスは、「アイテム 1」「アイテム 2」などのようになります。

これはcssで可能ですか、それともjqueryを使用する必要がありますか?

4

1 に答える 1

0

スペース セレクターを使用して弾丸画像を割り当てています。これにより、すべての子孫が選択されるため、より深いレベルにも弾丸画像が追加されます。

代わりに、大なりセレクターを使用して、直接の子のみを選択します。このように、一度に 1 つのレベルのみを選択します。

ul.menu>li:before {
    /* 1st level */
}

ul.menu>li>ul>li:before {
    /* 2nd level */
}

ul.menu>li>ul>li>ul>li ...
于 2015-05-05T00:09:51.327 に答える