Überschreiben Regeln von h4 mit einem class-Selektor

Ich habe Folgendes html:

<div class="main">
  <div class="container">
      <h4 class="test"> Test </h4>
  </div>
</div>​

Und die folgenden CSS:

.main .container h4 {
 color: red;   

}
.test {
 color: blue;   
}

Warum wäre das Klasse .testen Sie überschreiben nicht die Farbe die Regel? Wie kann ich dies erreichen?

Dank

InformationsquelleAutor Hommer Smith | 2012-11-13
  1. 7

    Dies ist ein Spezifität Problem.

    Besonderheit ist, wie wichtig ein bestimmter Selektor ist. In diesem Fall ist die erste Deklaration verwendet zwei Klassen, und ein element. Dies bedeutet, dass nur ein inline-style -, #id oder etwas mit mehr Klassen kann über ihn schreiben.

    Wenn Sie möchten, um Einfluss auf die Klasse test können wir .main .container .test, das ist 3 Klassen und wird jetzt über ihn schreiben!

    Wenn zwei Dinge haben die gleiche Spezifität, zum Beispiel, wenn Sie verwenden .main .container h4 wieder, wird der Letzte im Dokument Vorrang.

    Es ist ein Weg, um über zu schreiben, unabhängig von Ihrer Spezifität oder wo kommt es in dem Dokument, und das ist, indem !important einem bestimmten Stil, zum Beispiel .test { color: blue !important; }. Dies ist nicht empfehlenswert, wenn Sie verwenden können, was oben beschrieben ist, da dies möglicherweise künftig Probleme verursachen.

    Die spec gefunden werden kann hier

    Spezifität eines Selektors wird wie folgt berechnet:

    • zählen Sie 1, wenn die Deklaration ist ein 'style' - Attribut, sondern als eine Regel, die mit einem Selektor, sonst 0 (= a) (In HTML, Werte von ein element der "style" - Attribut Stylesheet-Regeln. Diese Regeln haben keine Selektoren, so dass a=1, b=0, c=0 und d=0.)
    • zähle die Anzahl der ID-Attribute im Selektor (= b)
    • die Anzahl der anderen Attribute und pseudo-Klassen im Selektor (= c)
    • zählen Sie die Anzahl der Elementnamen und pseudo-Elemente im Selektor (= d)
    • Die Spezifität bezieht sich nur auf die form des Selektors. Insbesondere, ein Selektor der form "[id=p33]" wird, zählt als ein Attribut-Selektor (a=0, b=0, c=1, d=0), selbst wenn das id-Attribut ist definiert als eine "ID" in das Quell-Dokument mit DTD.

    In der Verknüpfung der vier zahlen a-b-c-d (in einem Zahlensystem mit einer großen Basis) gibt die Spezifität.

    InformationsquelleAutor Andy
Schreibe einen Kommentar