Приоритеты правил CSS

Question

Учитывая следующую наценку ...

<div id="Header">
     <a href="#" class="Highlight">foo</a>
</div>

И следующая таблица стилей ...

/******************Exceptions******************/
#Footer, #Header,
#Footer a, #Header a { color: #f8f8f8; }


/******************Classes******************/
.Highlight, a.Highlight { color: #B1D355; }
.Notification, a.Notification { color: Red; }

Почему моя ссылка все еще не совсем белая (F8F8F8), а не зеленая (B1D355)?

Не следует ли с помощью класса Highlight переопределить настройки цвета для Верхний колонтитул и Нижний колонтитул , поскольку он идет после их объявлений?

Answer 1

Все дело в весе. Селектор класса превосходит селектор идентификатора.

#Footer a

всегда будет иметь приоритет над

.Highlight или .Highlight a

Сделай свой селектор

#Footer .highlight a

и с тобой все будет в порядке.

Answer 2

Приоритет CSS

1. Селектор идентификатора> Селектор класса> Селектор атрибута

2. Для того же приоритета последний имеет более высокий приоритет.

   .class1 { черный цвет; }

   .class2 { красный цвет; }

   Это будет красным.

3. Чтобы иметь больший приоритет, используйте !important

---

Для вашей проблемы #Footer - это селектор идентификатора с более высоким приоритетом, чем .Highlight, селектор класса.

Answer 3

ID имеет более высокий приоритет, чем класс в CSS:

Использование #Header a.Highlight { color: #B1D355; }

Answer 4

Правила CSS применяются не только на основе «последнего проанализированного, последнего примененного». Это также зависит от того, насколько конкретным и уникальным является правило для этого элемента. Поскольку вы указываете только селектор class, путь, включающий id, получает более высокий приоритет.