css - 使用 :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 并有一个 content:url(image.png)。

问题是我想要“类别”和“元素”的不同图像我该如何解决这个问题？

尝试了 ul.menu li:before 但是选择了树中的所有 li。我无法控制在 li 上生成的类。在 li 上生成的类就像“元素 1”“元素 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 ...