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

所以，我期望的行为是，在id为“headwrap”的div内的无序列表（ul）内的列表项（li）内的链接（a）具有包含“dev”的href，该链接将背景颜色为＃034769。如果链接的href包含“music”，则其背景颜色为＃A61300，依此类推。

但是，我看到的是规则只适用于“dev”。如果我重新排序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

您只能在属性声明后使用分号，如下所示：

selector { property: value; property2: value2; }