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) внутри элемента div с идентификатором "headwrap" имеет ссылку, содержащую "dev", ссылка иметь цвет фона # 034769. Если ссылка имеет ссылку, содержащую «музыку», она будет иметь цвет фона # 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; }

• Вот с точкой с запятой, не работает

• Вот без точек с запятой, работает

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

selector { property: value; property2: value2; }