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