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