Список стилей с разным изображением для разных уровней, используя:before img

Question

Использование 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 и иметь контент:url(image.png).

Проблема в том, что я хочу различное изображение для "Категорий" и "Предметов". Как мне это сделать?

Пытался ul.menu li:before но это относится ко всему ли в дереве. Классы, сгенерированные на языке li, не имеют большого контроля. Классы, сгенерированные на li, похожи на "item 1", item 2"и т. Д.

Это возможно с помощью CSS или мне нужно использовать JQuery?

Answer 1

Вы используете пространственный селектор, чтобы назначить свое изображение маркера, который выбирает всех потомков и, следовательно, добавляет изображение маркера на более глубокие уровни.

Вместо этого используйте селектор больше, чем для выбора только непосредственных потомков. Таким образом, вы выбираете только один уровень за раз.

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

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

ul.menu>li>ul>li>ul>li ...