Remplacer un css en-tête, avec un nouveau style de classe

Je suis à l'aide de l'un des web gratuit modèles de conception pour créer mon propre site. Le modèle utilise une feuille de style css et définit beaucoup de styles différents avec des noms similaires. J'ai défini quelques nouveaux styles, mais le problème est de nouveaux styles n'ont pas d'effet à mes pages.
Par exemple, c'est le style de heading2 dans l'un des blocs:

 #body .article h2 {
color: #ffaf04;
font-family: Georgia, serif;
font-size: 36px;
font-weight: normal;
letter-spacing: 2px;
line-height: 48px;
margin: 0;
padding: 0 48px;
text-align: center;
    }

J'essaie d'ajouter et d'utiliser ce style

 .eventTitle { font-size:28px; color:black  }

mais quand j'utilise 

 <h2 class="eventTitle">something</h2>

style de #corps .l'article est appliqué non pas eventTitle.

Je me demandais peut-être il ya certains parentalité ou la protection de certains parents styles en CSS, ou peut-être quelques éléments div doit utiliser un spécifique à la classe de styles ou de quelque chose.

J'apprécie tous les commentaires et les idées à l'avance.

InformationsquelleAutor antmw1361 | 2013-01-04
  1. 5

    Votre deuxième sélecteur est moins spécifiques que le premier sélecteur, de sorte que même si le second vient après le premier dans votre fichier CSS, le premier sera appliquée.

    Lire plus sur spécificité ici (un billet de blog écrit par Chris Coyier) et ici (le W3C specs).

    Voici un drôle de bande dessinée qui résume assez bien le concept de spécificité.

    Ma suggestion: Essayer de prendre #body dans le premier sélecteur (sauf si il ya une très bonne raison, il est là en premier lieu). Ensuite, essayez de changer votre deuxième sélecteur de

    .article .eventTitle { font-size:28px; color:black  }

    Je pas vous recommandons d'ajouter le !important modificateur de votre css commandes. Il doit être utilisé avec parcimonie (comme @Cody Guldner unis). Vraiment, votre CSS doit être propre et concis. À l'aide de !important un lot est seulement vous-même la mise en place de plus de travail dans l'avenir. Personnellement, je ne l'utilise que pour les corrections de bugs et des expériences.

    • Merci pour la réponse et les liens utiles. Il a résolu mon problème.
    • répondu de cette façon. Bravo, vous rat de laboratoire! haha!
    InformationsquelleAutor chharvey
  2. 1

    eventTitle ne sera pas appliquée depuis #body .article h2 est beaucoup plus spécifique que la classe, vous pouvez essayer de modifier votre classe de styles de

    .eventTitle { font-size:28px !important; couleur:noir !important; }

    de sorte qu'il aura la priorité sur celui, plus spécifique, #body .article h2

    • !important doit être utilisé sparsly
    InformationsquelleAutor Durty
  3. 0

    changement .eventTitle à #eventTitle. Id de toujours l'emporter d'une classe. À moins qu'un élément a 256 classes avec les mêmes styles 😉
    http://codepen.io/chriscoyier/pen/lzjqh

    Vous pourriez peut-être utiliser !important, mais je ne le recommanderais pas.

    Vous pouvez aussi faire quelque chose comme ceci

    #body h2, .eventTitle {
font-family: Georgia, serif;
font-weight: normal;
letter-spacing: 2px;
line-height: 48px;
margin: 0;
padding: 0 48px;
text-align: center;
}
.article h2{
color: #ffaf04;
font-size:36px;
}
.eventTitle { font-size:28px; color:black  }

    Espère que cette aide

    • Vrai, IDs toujours remplacer une classe, cependant, je vous conseille contre la modification d'une classe à un id pour les fins de la fixation css spécificité. Par ailleurs, cette solution ne fonctionne pas si l'OP veut avoir plus d'un titre style comme titre d'un événement.
    • ensuite, il est le troisième solution 🙂
    InformationsquelleAutor Cody Guldner