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

因此，我预期的行为是，如果一个链接 (a) 在一个列表项 (li) 中，在一个无序列表 (ul) 中，在一个 id 为“headwrap”的 div 中，其 href 包含“dev”，该链接将背景颜色为#034769。如果链接的 href 包含“音乐”，它将具有 #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; }