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 对于Clarity，列表结构的布局如下：

<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

'＆GT;'表示直接孩子如此内部Ul，李不会受到影响

nth-child ul列表项目背景重复到子ul列表

1 个答案: