从多个语句

我想使用多个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

回答

相关问题