CSS属性的内容选择多个声明

Question

我在CSS有这样的：

div#headwrap ul li a[href*="dev"] {background: #034769}; 
div#headwrap ul li a[href*="music"] {background: #A61300}; 
div#headwrap ul li a[href*="opinion"] {background: #b2d81e}; 
div#headwrap ul li a[href*="work"] {background: #ffc340}; 

所以，我预期的行为是其中一个链接（一）一个无序列表中列表项目（LI）内（UL）在ID为“headwrap”的div中有一个包含“dev”的href，该链接将具有＃034769的背景颜色。如果链接有一个包含“音乐”的href，它将具有＃A61300的背景色，依此类推。

但是，我所看到的是该规则只适用于“开发”。如果我对CSS声明重新排序（例如首先放置音乐），它仅适用于“音乐”。

我在Firefox和Chrome中测试，两者都在做同样的事情。只有第一个被应用。

任何人有任何想法为什么？

Answer 1

这些声明的结尾处删除;，像这样（我里面格式化他们，而是简单地删除它们解决您的问题）：

div#headwrap ul li a[href*="dev"] {background: #034769; } 
div#headwrap ul li a[href*="music"] {background: #A61300; } 
div#headwrap ul li a[href*="opinion"] {background: #b2d81e; } 
div#headwrap ul li a[href*="work"] {background: #ffc340; } 

• Here's with the semicolons, not working

• Here's without the semicolons, working

You onl y在属性声明后使用分号，如下所示：

selector { property: value; property2: value2; }