Überschreiben einer css-überschrift mit einem neuen Stil Klasse

Bin ich mit einer der frei web-design-Vorlagen zum erstellen meiner eigenen Website. Das template verwendet ein css-Stylesheet definiert und für viele verschiedene Stile mit ähnlichen Namen. Definierte ich einige neue styles, aber das problem ist die neuen styles haben keinen Einfluss auf meine Seiten.
Zum Beispiel, das ist der Stil für heading2 in einem der Blöcke:

 #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;
    }

Ich versuche Sie auf hinzufügen und verwenden Sie diesen Stil

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

aber wenn ich 

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

Stil von #Körper .Artikel wird nicht eventTitle.

Ich Frage mich, vielleicht gibt es einige die elternschaft oder das schützen von einigen übergeordneten Formatvorlagen in CSS, oder vielleicht ein paar div-Elemente zu verwenden hat einige spezifische Klasse-styles oder so.

Ich freue mich über Kommentar und Anregungen im Voraus.

InformationsquelleAutor antmw1361 | 2013-01-04

  1. 5

    Ihre zweite Auswahl ist weniger bestimmten als die erste Auswahl, also auch wenn der zweite kommt, nachdem das erste man in der CSS-Datei, die erste angewendet.

    Lesen Sie mehr über Spezifität hier (ein blog-Beitrag geschrieben von Chris Coyier) und hier (der W3C-specs).

    Hier ist ein sehr lustiges comic , dass ziemlich viel fasst das Konzept der Spezifität.

    Mein Vorschlag: Versuchen Sie #body im ersten Selektor (es sei denn, es gibt einen sehr guten Grund, es gibt es in den ersten Platz). Dann versuchen Sie, Ihre zweite Auswahl zu

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

    Ich würde nicht empfehlen das hinzufügen der !important Modifizierer zu Ihrer css-Befehle. Es sollte sparsam verwendet werden (wie @Cody Güldner Staaten). Wirklich, deinem CSS soll sauber und übersichtlich. Mit !important viele ist nur sich für die Einstellung mehr Arbeit in die Zukunft. Persönlich, ich nur benutzen Sie es für bug-fixes und Experimente.

    Vielen Dank für die Antwort und die nützlichen links. Es ist mein problem gelöst.
    dies beantwortet so gut. Kudos Ihnen Laborratte! haha!

    InformationsquelleAutor chharvey

  2. 1

    eventTitle nicht angewendet werden, da #body .article h2 ist viel spezieller als die Klasse, können Sie versuchen, ändern Sie Ihre Klasse styles zu

    .eventTitle { font-size:28px !wichtig; Farbe:schwarz !wichtig; }

    so, dass es Vorrang vor den spezifischen #body .article h2

    !wichtig sollte verwendet werden, sparsly

    InformationsquelleAutor Durty

  3. 0

    ändern .eventTitle zu #eventTitle. IDs überschreiben immer eine Klasse. Es sei denn, ein element hat 256 Klassen mit den gleichen Formatvorlagen 😉
    http://codepen.io/chriscoyier/pen/lzjqh

    Könnten Sie möglicherweise verwenden !wichtig, aber würde ich es nicht empfehlen.

    Könnte man auch so etwas tun

    #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  }

    Hoffe, das hilft

    Stimmt, IDs überschreiben immer eine Klasse, jedoch würde ich davon abraten das ändern einer Klasse, um eine id für die Zwecke der Festsetzung der css-Spezifität. Auch diese Lösung funktioniert nicht, wenn der OP will, um mehr als eine überschrift Stil als event-Titel.
    dann gibt es noch die Dritte Lösung 🙂

    InformationsquelleAutor Cody Guldner

Schreibe einen Kommentar