html - 第 n 个子 ul 列表项背景重复到子 ul 列表

Question

我正忙于 Bigcommerce 网站的设计，发现列表项及其各自背景存在 css 语法问题。

列表项标题和列表项本身是从数据库生成的。这是我的代码的样子:

.Left #SideCategoryList ul li:first-child a {
background-image:url("hiddenurl/product_images/uploaded_images/cat-types.png") !important;
padding-left:10px;
padding-top:25px;    
}

.Left #SideCategoryList ul li:nth-child(2) a {
 background-image:url("hiddenurl/product_images/uploaded_images/cat-collections.png") !important;
padding-left:10px;
padding-top:36px;
}
.Left #SideCategoryList ul li:nth-child(3) a {
background-image:url("hiddenurl/product_images/uploaded_images/cat-themes.png") !important;
padding-left:10px;
padding-top:17px;
}

这些图像完美地显示为我的列表项的标题背景。

然而，这些背景随后被添加到我似乎无法删除的后续 ul 列表项中。

我试图通过以下内容强制后续列表项没有背景:

.Left #SideCategoryList ul li ul li a {
background-image:none !important;
}

但他们仍然不会消失。

你们知道如何重新编码列表项的背景或强制列表项的其余部分，以便这些背景仅出现在“外部”Ul 的列表项标题上吗？

如有任何帮助，我们将不胜感激。

编辑 出于隐私考虑，我正在删除我的网址。完整的 http:\url 在原始 css 中。

编辑 2 为了清楚起见，列表结构的布局如下:

<ul>
   <li>
      <ul>
         <li></li>
         <li></li>
         <li></li>
      </ul>
   </li>
    <li> 
       <ul>
         <li></li>
         <li></li>
         <li></li>
      </ul>
   </li>
      <ul>
         <li></li>
         <li></li>
         <li></li>
      </ul>
   </li>
</ul>

Answer 1

为你的 CSS 尝试这个选择器:-

.Left #SideCategoryList > ul > li:first-child > a

'>' 表示直接 child 所以内部 Ul,Li 不会受到影响