第n个孩子UL列表项的背景重复子无序列表

我忙用的Bigcommerce网站的设计，并已发现列表中的项目和他们各自的背景，一个CSS语法问题。第n个孩子UL列表项的背景重复子无序列表

列表项的标题和自己是从数据库中生成的列表项。以下是我的代码的样子：

.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; 
}

但是他们仍然不会消失。

你们是否有任何想法我可以重新编码列表项的背景或强制列表项的其余部分，以便这些背景只出现在“外部”UI的列表项目标题上？

任何帮助，将不胜感激。

编辑我取出我的网址的隐私问题。完整的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>

来源

2013-02-18 Danie Oberholzer

可以的jsfiddle呢？您可以使用图片托管网站托管您的图片，这样我们就可以在jsfiddle中看到您正在查看的内容 – abbood 2013-03-11 18:00:20

试试这个选择对你的CSS： -

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

'>' 表示直接子这样的内部UL，李将不会受到影响

来源

2013-03-11 18:15:36

第n个孩子UL列表项的背景重复子无序列表

回答

相关问题