CSS
Kaskadierung und Spezifität

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
Suche…


Bemerkungen

Durch die CSS-Spezifität soll der Code prägnanter gemacht werden, indem einem Autor ermöglicht wird, einige allgemeine Formatierungsregeln für eine große Anzahl von Elementen zu definieren und diese dann für eine bestimmte Teilmenge zu überschreiben.

Kaskadieren

Kaskadierung und Spezifität werden zusammen verwendet, um den endgültigen Wert einer CSS-Stileigenschaft zu bestimmen. Sie definieren auch die Mechanismen zum Lösen von Konflikten in CSS-Regelsätzen.

CSS-Ladereihenfolge

Stile werden aus folgenden Quellen in dieser Reihenfolge gelesen:

  1. User Agent-Stylesheet (die vom Browser-Anbieter bereitgestellten Stile)
  2. User Stylesheet (das zusätzliche Styling, das ein Benutzer in seinem Browser festgelegt hat)
  3. Autoren-Stylesheet (Autor bezeichnet hier den Ersteller der Webseite / Website)
    • Möglicherweise eine oder mehrere .css Dateien
    • Im <style> -Element des HTML-Dokuments
  4. Inline-Stile (im style Attribut eines HTML-Elements)

Der Browser sucht beim Rendern eines Elements nach den entsprechenden Stilen.

Wie werden Konflikte gelöst?

Wenn nur ein CSS-Regelsatz versucht, einen Stil für ein Element festzulegen, liegt kein Konflikt vor, und dieser Regelsatz wird verwendet.

Wenn mehrere Regelsätze mit widersprüchlichen Einstellungen gefunden werden, werden zuerst die Specificty-Regeln und dann die Cascading-Regeln verwendet, um den zu verwendenden Stil zu bestimmen.

Beispiel 1 - Spezifitätsregeln 

.mystyle { color: blue; }  /* specificity: 0, 0, 1, 0 */
div { color: red; }        /* specificity: 0, 0, 0, 1 */

<div class="mystyle">Hello World</div>

Welche Farbe wird der Text haben? (schweben, um die Antwort zu sehen)

Blau

Zuerst werden die Spezifitätsregeln angewendet und diejenige mit der höchsten Spezifität "gewinnt".

Beispiel 2 - Kaskadenregeln mit identischen Selektoren

Externe CSS-Datei 

.class {
  background: #FFF;
}

Interne CSS (in HTML-Datei) 

<style>
.class {
  background: #000;
}
<style>

In diesem Fall setzt die Kaskade bei identischen Selektoren ein und stellt fest, dass der zuletzt geladene "gewinnt".

Beispiel 3 - Kaskadenregeln nach Spezifitätsregeln 

body > .mystyle { background-color: blue; }   /* specificity: 0, 0, 1, 1 */
.otherstyle > div { background-color: red; }  /* specificity: 0, 0, 1, 1 */

<body class="otherstyle">
  <div class="mystyle">Hello World</div>
</body>

Welche Farbe wird der Hintergrund haben?

rot

Nach dem Anwenden der Spezifitätsregeln gibt es immer noch einen Konflikt zwischen Blau und Rot, sodass die Kaskadenregeln zusätzlich zu den Spezifitätsregeln angewendet werden. Beim Kaskadieren wird die .css der Regeln untersucht, unabhängig davon, ob sie sich in derselben .css Datei oder in der Sammlung von Stilquellen befinden. Der zuletzt geladene überschreibt alle früheren. In diesem Fall "gewinnt" die Regel .otherstyle > div .

Eine letzte Notiz

  • Selektorspezifität hat immer Vorrang.
  • Stylesheet-Bestellung unterbricht Krawatten.
  • Inline-Stile übertreffen alles.

Die! Wichtige Erklärung

Die !important Deklaration wird verwendet, um die übliche Spezifität in einem Stylesheet zu überschreiben, indem einer Regel eine höhere Priorität zugewiesen wird. Ihre Verwendung ist: property : value !important; 

#mydiv {
    font-weight: bold !important;    /* This property won't be overridden
                                       by the rule below */
}

#outerdiv #mydiv {
    font-weight: normal;            /* #mydiv font-weight won't be set to normal
                                    even if it has a higher specificity because
                                    of the !important declaration above */
}

Das Vermeiden der Verwendung von !important wird dringend empfohlen (es sei denn, dies ist absolut erforderlich), da dies den natürlichen Fluss der CSS-Regeln stören würde, was zu Unsicherheit in Ihrem Stylesheet führen kann. Es ist auch wichtig zu beachten, dass, wenn mehrere !important Deklarationen auf die gleiche Regel auf ein bestimmtes Element angewendet werden, diejenige mit der höheren Spezifität das ona ist.

Hier einige Beispiele, bei denen die Verwendung !important Deklarationen gerechtfertigt ist:

  • Wenn Ihre Regeln nicht durch einen Inline-Stil des Elements überschrieben werden sollen, der in das style Attribut des html-Elements geschrieben wird.
  • Um dem Benutzer mehr Kontrolle über die Webzugriffsmöglichkeiten zu geben, z. B. das Vergrößern oder Verkleinern der Schriftgröße, indem der Autorstil mit !important überschrieben wird.
  • Zum Testen und Debuggen mit inspect element.

Siehe auch:

Berechnung der Selektorspezifität

Jeder einzelne CSS-Selector hat seinen eigenen Spezifitätswert. Jeder Selektor in einer Sequenz erhöht die Gesamtspezifität der Sequenz. Selektoren fallen in eine von drei verschiedenen Spezifitätsgruppen: A , B und c . Wenn mehrere Auswahlsequenzen ein bestimmtes Element auswählen, verwendet der Browser die von der Sequenz verwendeten Stile mit der höchsten Gesamtspezifität.

Gruppe Bestehend aus Beispiele
EIN ID-Selektoren #foo
B Klassen-Selektoren
Attributselektoren
Pseudoklassen 		.bar
[title] , [colspan="2"]
:hover :nth-child(2)
c Typenauswahl
Pseudoelemente 		div , li
::before , ::first-letter

Gruppe A ist am spezifischsten, gefolgt von Gruppe B und schließlich Gruppe c .

Der Universalselektor ( * ) und die Kombinatoren (wie > und ~ ) sind nicht spezifisch.

Beispiel 1: Spezifität verschiedener Selektorsequenzen 

#foo #baz {}      /* a=2, b=0, c=0 */

#foo.bar {}       /* a=1, b=1, c=0 */

#foo {}           /* a=1, b=0, c=0 */

.bar:hover {}     /* a=0, b=2, c=0 */

div.bar {}        /* a=0, b=1, c=1 */

:hover {}         /* a=0, b=1, c=0 */

[title] {}        /* a=0, b=1, c=0 */

.bar {}           /* a=0, b=1, c=0 */

div ul + li {}    /* a=0, b=0, c=3 */

p::after {}       /* a=0, b=0, c=2 */

*::before {}      /* a=0, b=0, c=1 */

::before {}       /* a=0, b=0, c=1 */

div {}            /* a=0, b=0, c=1 */

* {}              /* a=0, b=0, c=0 */

Beispiel 2: Wie wird die Spezifität vom Browser verwendet?

Stellen Sie sich die folgende CSS-Implementierung vor: 

#foo {
  color: blue;
}

.bar {
  color: red;
  background: black;
}

Hier haben wir einen ID-Selektor, der die color als blau deklariert, und einen Klassenselektor, der die color als Rot und den background als Schwarz deklariert.

Ein Element mit der ID #foo und der Klasse .bar wird von beiden Deklarationen ausgewählt. ID-Selektoren haben eine Spezifität der Gruppe A und Klassenselektoren haben eine Spezifität der Gruppe B. Ein ID-Selektor überwiegt eine beliebige Anzahl von Klassenselektoren. Aus diesem Grund color:blue; aus dem #foo Selektor und dem background:black; von der .bar wird auf das Element angewendet. Die höhere Spezifität des ID - Selektor wird der Browser das ignorieren .bar Wähler der color Erklärung.

Stellen Sie sich jetzt eine andere CSS-Implementierung vor: 

.bar {
  color: red;
  background: black;
}

.baz {
  background: white;
}

Hier haben wir zwei Klassenselektoren; eine davon deklariert die color als rot und den background als schwarz und die andere den background als weiß .

Ein Element mit den Klassen .bar und .baz wird von beiden Deklarationen betroffen sein. Das Problem, das wir jetzt haben, ist jedoch, dass sowohl .bar als auch .baz eine identische Spezifität für Gruppe B aufweisen . Die Kaskadierung von CSS löst dies für uns auf: .baz nach .bar definiert .bar , endet unser Element mit der roten color von .bar , dem weißen background von .baz .

Beispiel 3: Manipulation der Spezifität

Der letzte Ausschnitt aus dem obigen Beispiel 2 kann manipuliert werden , um sicherzustellen , unsere .bar Klassenauswahl der color Erklärung statt , dass die verwendeten .baz Klassenauswahl. 

.bar {}        /* a=0, b=1, c=0 */
.baz {}        /* a=0, b=1, c=0 */

Die gebräuchlichste Methode, dies zu erreichen, besteht darin, herauszufinden, welche anderen Selektoren auf die .bar Selektorsequenz angewendet werden können. Wenn beispielsweise die .bar Klasse nur auf span Elemente angewendet wurde, können Sie den .bar Selektor in span.bar . Dies würde zu einer neuen Gruppe C- Spezifität führen, die den Mangel der .baz außer Kraft setzen würde: 

span.bar {}    /* a=0, b=1, c=1 */
.baz {}        /* a=0, b=1, c=0 */

Es kann jedoch nicht immer möglich sein, einen anderen allgemeinen Selektor zu finden, der von jedem Element gemeinsam genutzt wird, das die .bar Klasse verwendet. Aus diesem Grund ermöglicht CSS die Selektion von Selektoren, um die Spezifität zu erhöhen. Anstelle von .bar können .bar.bar stattdessen .bar.bar verwenden (siehe Die Grammatik von Selectors, W3C-Empfehlung ). Dies wählt immer noch jedes Element mit der Klasse .bar , hat aber jetzt die doppelte Spezifität der Gruppe B : 

.bar.bar {}    /* a=0, b=2, c=0 */
.baz {}        /* a=0, b=1, c=0 */

!important und Inline-Stildeklarationen

Die !important - Flagge auf einer Stildeklaration und Stile von dem HTML erklärten style - Attribut gilt als eine höhere Spezifität als jeder Wähler hat. Wenn diese vorhanden sind, überschreibt die Stildeklaration, auf die sie sich auswirkt, andere Deklarationen unabhängig von ihrer Spezifität. Das heißt, es sei denn, Sie haben mehr als eine Deklaration, die ein !important Flag für dieselbe Eigenschaft enthält, das für dasselbe Element gilt. Für diese Eigenschaften gelten dann normale Spezifitätsregeln, die sich aufeinander beziehen.

Da sie die Spezifität vollständig außer Kraft setzen, wird die Verwendung von !important in den meisten Anwendungsfällen missbilligt. Man sollte es so wenig wie möglich verwenden. CSS - Code effizient und wartbar auf lange Sicht zu halten, ist es fast immer besser , die Spezifität des umgebenden Wähler zu erhöhen , als zu verwenden , um !important .

Eine der seltenen Ausnahmen, bei denen !important ist, ist die Implementierung allgemeiner .hidden wie einer .hidden oder .background-yellow Klasse, die eine oder mehrere Eigenschaften immer dort überschreiben soll, wo sie vorkommen. Und selbst dann müssen Sie wissen, was Sie tun. Das letzte, was Sie beim Schreiben von wartungsfähigem CSS wollen, ist, !important Flaggen in Ihrem CSS zu haben.

Eine letzte Notiz

Ein häufiges Missverständnis bezüglich der CSS-Spezifität besteht darin, dass die Werte für Gruppe A , B und c miteinander kombiniert werden sollten ( a=1, b=5, c=1 => 151). Dies ist nicht der Fall. Wenn dies der Fall wäre, reicht es aus, 20 Gruppen der Gruppe B oder c zu wählen, um jeweils eine Gruppe A oder B zu überschreiben. Die drei Gruppen sollten als individuelle Spezifitätsebenen betrachtet werden. Die Spezifität kann nicht durch einen einzelnen Wert dargestellt werden.

Beim Erstellen Ihres CSS-Stylesheets sollten Sie die geringstmögliche Spezifität beibehalten. Wenn Sie die Spezifität etwas höher machen müssen, um eine andere Methode zu überschreiben, erhöhen Sie sie, aber so niedrig wie möglich, um sie zu erhöhen. Sie sollten keinen Selektor wie diesen brauchen: 

body.page header.container nav div#main-nav li a {}

Dies macht zukünftige Änderungen schwieriger und verschmutzt diese CSS-Seite.

Sie können die Spezifität Ihrer Wähler berechnen hier

Beispiel für komplexere Spezifität

div {
    font-size: 7px;
    border: 3px dotted pink;
    background-color: yellow;
    color: purple;
}

body.mystyle > div.myotherstyle {
    font-size: 11px;
    background-color: green;
}

#elmnt1 {
    font-size: 24px;
    border-color: red;
}

.mystyle .myotherstyle {
    font-size: 16px;
    background-color: black;
    color: red;
}

<body class="mystyle">
    <div id="elmnt1" class="myotherstyle">
        Hello, world!
    </div>
</body>

Welche Rahmen, Farben und Schriftgrößen wird der Text haben?

Schriftgröße:

font-size: 24; Da der #elmnt1 die höchste Spezifität für das betreffende <div> , wird hier jede Eigenschaft festgelegt.

Rand:

border: 3px dotted red; . Die #elmnt1 red wird aus dem #elmnt1 Regelsatz übernommen, da sie die höchste Spezifität aufweist. Die anderen Eigenschaften des Rahmens, der Randstärke und des div stammen aus dem div Regelsatz.

Hintergrundfarbe:

background-color: green; . Die background-color wird in den body.mystyle > div.myotherstyle div , body.mystyle > div.myotherstyle und .mystyle .myotherstyle . Die Besonderheiten sind (0, 0, 1) vs. (0, 2, 2) vs. (0, 2, 0), also "gewinnt" der mittlere.

Farbe:

color: red; . Die Farbe wird in den .mystyle .myotherstyle div und .mystyle .myotherstyle . Letzteres hat die höhere Spezifität von (0, 2, 0) und "gewinnt".



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow