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并拥有一个内容：url（image.png）。

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

试过ul.menu li:before了，但这会在树中选择所有 li。在 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 ...