2013-02-18 106 views
0

我忙用的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> 
+0

可以的jsfiddle呢?您可以使用圖片託管網站託管您的圖片,這樣我們就可以在jsfiddle中看到您正在查看的內容 – abbood 2013-03-11 18:00:20

回答

0

試試這個選擇對你的CSS: -

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

'>' 表示直接子這樣的內部UL,李將不會受到影響