CSS атрибутов Content Selector несколько объявлений

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) внутри неупорядоченного списка (мкл) внутри div с id «headwrap» имеет 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

You onl y используйте точку с запятой после объявления собственности, например:

selector { property: value; property2: value2; }