Как предотвратить, чтобы мой стиль не был переопределен другим стилем на окружающем div?

Это кажется элементарным, но вот проблема.

Таблица стилей:

#Content h1, #Content h2, #Content h3, #Content h4, #Content h5, #Content h6 {
  color: #405679;
}

h3#issueHeader {
  color: blue;
}

HTML так:

<div id="Content">
  <h3 id="issueHeader">In This Issue:</h3>
</div>

Вместо моего селектора selectHeader, переопределяющего селектор содержимого, как я ожидал, Firebug и мои глазные яблоки показывают мне, что цвет унаследован от div, а селектор selectHeader переопределен. Hunh?

Ответ 1

css дает больше веса элементам с более чем specific селекторами. Поэтому, если вы хотите #Content h3 не переопределять h3#issueHeader, дайте ему другой селектор: например. #Content h3 # issueHeader

Если ваши элементы h1... hx должны быть в основном # 405679, установите их так, чтобы без селектора #Content. Затем переопределите их с помощью более конкретного селектора, когда вам нужно.

Ответ 2

Вы можете выбросить атрибут !important в h3#issueHeader, чтобы заставить браузер использовать этот стиль

h3#issueHeader {
  color: blue !important;
}

Однако он поддерживается только частично в IE6

Кроме того, это следует использовать только в качестве последнего средства для решения других задач. Это связано с тем, что, если пользователи вашего сайта хотят переопределить ваш стиль, важным становится для этого полезным инструментом. См. Эту статью: Не используйте "! Important"

Ответ 3

Попробуйте установить селектор как:

#Content h3#issueHeader {
    color: blue;
}

Это должно исправить.

Ответ 4

У вас есть то, что называется спецификацией CSS. Здесь хороший зачисток (с использованием starwars для загрузки), который объясняет основы в терминах точек и как рассчитать, что будет каскадно:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Ответ 5

Если id = "issueHeader" дублируется, что можно сделать.