CSS id-элемент перезаписывает определение своего потомка

Question

#top a {
  color: #C6D6CA;
  margin: 0 25px;
  text-decoration: none;
}

.mainlink a {
  display: block;
  height: 100%;
  width: 100%;
  margin: 0;
}

.mainlink div находится где-то в #top.Почему определение #top (родительского) поля перезаписывает определение, установленное в .mainlink a?Как изменить это поведение?

Answer 1

Вы можете исправить это, изменив свои правила:

#top a {}
#top .mainlink a {}

Answer 2

Это называется спецификацией селектора. Смотрите также: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 3

Селектор #top a имеет специфичность , чем .mainlink a.Идентификаторы селекторов значительно повышают специфичность селектора.

Каждый идентификатор увеличивает специфичность селектора в 100 раз. Каждый класс увеличивает специфичность в 10 раз.

В таком случае я бы:

A.Замените идентификатор классом или
B. Добавьте идентификатор ко второму селектору.

Answer 4

Именованные идентификаторы имеют более высокий приоритет, чем классы, когда таблицы стилей каскадируются.

http://www.w3.org/TR/CSS2/cascade.html

Вы можете использовать margin: 0 !important для принудительного переопределения.

Answer 5

Поскольку CSS "каскады", цвет будет применяться к любому из дочерних элементов.Вам нужно будет указать цвет для дочернего элемента и, возможно, потребуется добавить «! Важное» в конец объявления свойства.