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

标签 html css html-lists css-selectors

我正忙于 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>

最佳答案

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

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

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

关于html - 第 n 个子 ul 列表项背景重复到子 ul 列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14936470/

相关文章:

css - 删除第二行水平列表项的边框

php - 动态加载 <ul> 并排序为 5 行的列

html - 如何正确导入 font-awesome scss

javascript - 如何使用 JQuery 检索单击对象内具有特定类的 span 元素内的文本?

javascript - 检查是否存在具有相同 id 的 HTML 元素

javascript - 内容淡入背景

javascript - 使用 jquery 在列表项上删除和添加类单击?

css - 在屏幕上居中 div,在 IE11 上不起作用,但在 Firefox 上可以

javascript - 使用语义网格系统的局限性?

html - 根据特定类的 sibling 调整 div 的大小