從多個語句

我想使用多個CSS3的背景圖像應用多個CSS3背景圖片，這讓語義意義爲此在兩個不同的聲明，就像這樣：從多個語句

#brands > ul > li:nth-child(odd) { 
    background-image: url(img/logo/divide.jpg) no-repeat left center, url(img/logo/divide.jpg) no-repeat right center; 
} 

#brands .name { 
    background:url(img/logo/name.jpg) no-repeat center; 
}

但是第二個聲明將覆蓋第一。有沒有辦法只用CSS來解決這個問題？

來源

2011-03-08 Ben

你正在測試什麼瀏覽器？ – 2011-03-08 15:55:46

'#brands .name'選擇器的特異性較低，所以我不明白爲什麼它會覆蓋另一個。 – 2011-03-08 16:07:36

我使用Google Chrome。 – Ben 2011-03-08 16:28:38

你的選擇都很好，但你的錯誤是在第一個聲明：

background-image: url(img/logo/divide.jpg) no-repeat left center, url(img/logo/divide.jpg) no-repeat right center;

您需要使用的，而不是background-image速記background屬性，因爲您指定了一堆其他值與圖像一起。看起來你的第二條規則超越第一條的原因是因爲第一條規則是無效的，因此實際上被完全忽略。

您可能（如Groovetrain says）必須添加另一個規則來組合這兩者，但我最近沒有修改過多個背景，所以我不能肯定地說如何覆蓋/整合其他規則。

來源

2011-03-09 03:00:48 BoltClock

您可能必須包含一個附加規則來說明所應用的「名稱」類。就像這樣：

#brands > ul > li:nth-child(odd) { 
    background-image: url(img/logo/divide.jpg) no-repeat left center, url(img/logo/divide.jpg) no-repeat right center; 
} 

#brands .name { 
    background:url(img/logo/name.jpg) no-repeat center; 
} 

/* This one has all three bg images */ 
#brands > ul > li.name:nth-child(odd) { 
    background: url(img/logo/divide.jpg) no-repeat left center, url(img/logo/divide.jpg) no-repeat right center, url(img/logo/name.jpg) no-repeat center; 
}

來源

2011-03-08 16:10:04 Groovetrain

回答

相關問題