web-dev-qa-db-fra.com

Comment puis-je empêcher que mon style soit remplacé par un autre style sur une div environnante?

Cela semble élémentaire, mais voici un problème.

Feuille de style comme ceci:

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

h3#issueHeader {
  color: blue;
}

HTML comme ceci:

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

Au lieu que mon sélecteur issueHeader remplace le sélecteur de contenu comme je m'y attendais, Firebug et mes globes oculaires me montrent que la couleur est héritée du div et le sélecteur issueHeader est remplacé. Hunh?

htmlcsscss-selectors
23
jergason

css donne plus de poids aux éléments avec plus de sélecteurs spécifiques . Donc, si vous voulez #Content h3 ne pas remplacer h3#issueHeader, donnez-lui un autre sélecteur: par exemple #Content h3 # issueHeader

Si vos éléments h1 ... hx sont censés être généralement # 405679, définissez-les sans le sélecteur #Content. Remplacez-les ensuite avec un sélecteur plus spécifique lorsque vous en avez besoin.

38
dnagirl

Vous pouvez lancer le !important attribut sur h3#issueHeader pour forcer le navigateur à utiliser ce style

h3#issueHeader {
  color: blue !important;
}

Cependant, il n'est que partiellement pris en charge dans IE6

41
Gavin Miller

Essayez de régler le sélecteur sur:

#Content h3#issueHeader {
    color: blue;
}

Cela devrait le réparer.

3
Zack Marrapese

Vous avez ce qu'on appelle la spécificité CSS. Voici une bonne rédaction (en utilisant starwars pour démarrer), qui explique les bases en termes de points et comment calculer ce qui se produira en cascade:

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

1
easement

Si id = "issueHeader" est dupliqué, cela pourrait le faire.

0
Vian Esterhuizen