Diese Antwort ist für absolute Anfänger. Wenn Sie einen Überblick über diese Antwort wünschen, lesen Sie bitte meine zweite Antwort.
Beim Kaskadieren werden verschiedene Stylesheets kombiniert und Konflikte zwischen verschiedenen CSS-Regeln und -Deklarationen gelöst, wenn für ein bestimmtes Element mehr als eine Regel gilt . Denn wie Sie wahrscheinlich bereits wissen, kann eine Deklaration für eine bestimmte Stileigenschaft wie die Schriftgröße in mehreren Stylesheets und auch mehrmals in einem einzelnen Stylesheet erscheinen.
Um die Kaskadierung zu verstehen, müssen Sie mit der CSS-Analysephase beginnen, da in der Analysephase der erste Schritt darin besteht, widersprüchliche CSS-Deklarationen aufzulösen, und der zweite Schritt darin besteht, die endgültigen CSS-Werte zu verarbeiten.
Jetzt kann CSS auch aus verschiedenen Quellen stammen. Das häufigste ist das CSS, das wir Entwickler schreiben. Diese Erklärungen, die wir in unsere Stylesheets aufnehmen, werden als Autorenerklärungen bezeichnet. Eine andere Quelle können die Benutzerdeklarationen sein, bei denen es sich um vom Benutzer stammendes CSS handelt. Wenn der Benutzer beispielsweise die Standardschriftgröße im Browser ändert, ist dies Benutzer-CSS, und nicht zuletzt gibt es die Standard-Browserdeklarationen.
Wenn wir beispielsweise ein Ankertag für einen Link in unser HTML einfügen und es dann überhaupt nicht formatieren, wird es normalerweise mit blauem Text gerendert und rechts unterstrichen. Dies wird als Benutzeragenten-CSS bezeichnet, da es vom Browser festgelegt wird. Die Kaskade kombiniert also die CSS-Deklarationen, die aus all diesen verschiedenen Quellen stammen. Wie löst die Kaskade jedoch Konflikte, wenn mehr als eine Regel gilt?
Nun, es geht darum, die Wichtigkeit, die Selektorspezifität und die Reihenfolge der widersprüchlichen Deklarationen zu ermitteln, um festzustellen, welche Vorrang hat, und so funktioniert das. Zunächst beginnt die Kaskade damit, dass widersprüchliche Erklärungen von unterschiedlicher Bedeutung abgegeben werden, je nachdem, wo sie in ihrer Quelle deklariert sind. Die wichtigsten Deklarationen sind Benutzerdeklarationen, die mit dem wichtigen Schlüsselwort gekennzeichnet sind.
Die zweitwichtigsten Erklärungen sind die mit wichtig gekennzeichneten Autorenerklärungen. Drittens sind die normalen Autorendeklarationen, dann die normalen Benutzerdeklarationen und schließlich die am wenigsten wichtigen die Standardbrowserdeklarationen, was tatsächlich sehr sinnvoll ist, dass wir diese standardmäßig vom Browser kommenden Deklarationen leicht überschreiben können.
Jetzt haben wir oft nur eine Reihe widersprüchlicher Regeln in unseren Autoren-Stylesheets ohne ein wichtiges Schlüsselwort. Dies ist tatsächlich das häufigste Szenario, und in diesem Fall haben alle Erklärungen genau die gleiche Bedeutung. Was passiert nun in diesem Fall? Wenn dies der Fall ist, berechnet und vergleicht die Kaskade die Spezifitäten der Deklarationsselektoren, und so funktioniert es.
Inline-Stile haben die höchste Spezifität, gefolgt von IDs, Klassen, Pseudoklassen und Attributselektoren und schließlich dem am wenigsten spezifischen Element- und Pseudoelement-Selektor. Wenn wir also widersprüchliche Deklarationen mit der gleichen Wichtigkeit haben, die wir auf der letzten Folie gesehen haben, berechnen wir ihre Selektorspezifität basierend auf den Prioritäten, die ich Ihnen gerade gezeigt habe, aber lassen Sie uns sehen, wie wir die Spezifitäten tatsächlich anhand eines kleinen Beispiels berechnen, das ist immer am besten, richtig.
Aus dem obigen Beispiel haben alle diese Deklarationen die gleiche Bedeutung, da sie alle Autorendeklarationen sind. Berechnen wir also ihre Selektorspezifitäten, um herauszufinden, ob die Hintergrundfarbe entweder blau, grün, lila oder gelb ist, und so machen wir es. Die Spezifität ist eigentlich nicht nur eine Nummer, sondern eine Nummer für jede der vier Kategorien, die ich Ihnen zuvor gezeigt habe. Inline-Stile, IDs, Klassen, Pseudoelemente und Attribute und schließlich Elemente. Für jedes dieser Elemente wird die Anzahl der Vorkommen im Selektor gezählt.
Hier in Auswahl 1 haben wir natürlich keine Inline-Stile, da ein Inline-Stil in HTML geschrieben werden muss, was hier nicht der Fall ist, also eine Null. Wir haben hier auch keine IDs, also ist es wieder eine Null, aber wir haben eine Klasse, die Button-Klasse. Für die Klassenkategorie haben wir also eine Eins, und schließlich gibt es hier keinen Element-Selektor, also auch für diese Null, und das war's. Die Selektorspezifität ist Null, Null, Eins, Null.
Vergleichen wir es jetzt mit den anderen. Der nächste ist ebenfalls kein Inline-Stil, also Null für den ersten. Jetzt haben wir hier tatsächlich einen ID-Selektor für die Navigations-ID, also einen für die ID. Wir haben auch zwei Klassen, die nach rechts und nach rechts ziehen, also ist es eine Zwei für die Klassenkategorie, und schließlich gibt es hier auch zwei Element-Selektoren. Das nav-Element und das div-Element, was bedeutet, dass es auch zwei für die Elementkategorie sind. Schließlich ist die Spezifität für den Selektor Null, Eins, Zwei, Zwei, was eigentlich ein hochspezifischer Selektor ist.
Selektor Nummer drei ist sehr einfach. Es ist nur eine Elementauswahl und daher ist die Spezifität Null, Null, Null, Eins.
Nun der letzte, Selektor Nummer vier. Zuerst haben wir wieder die Navigations-ID, also eine für die ID. Als nächstes haben wir eine Klasse, die Button-Klasse, und auch eine Pseudo-Klasse, die schwebt, was sie für die Klassenkategorie insgesamt zu zwei macht. Da es auch einen Elementwähler gibt, ist die endgültige Spezifität Null, Eins, Zwei, Eins.
Lassen Sie uns nun wissen, wie wir diese Zahlen tatsächlich verwenden, um herauszufinden, welcher der Selektoren zutrifft. Wir beginnen, die Zahlen von links nach rechts zu betrachten, beginnend mit der spezifischsten Kategorie, den Inline-Stilen. Wenn es einen Selektor mit einem für Inline-Stile gibt, gewinnt er gegen alle anderen Selektoren, da dies die spezifischste Kategorie ist. Nun, das ist hier nicht der Fall, also gehen wir weiter zu den IDs. Wir sehen, dass die Selektoren zwei und vier hier eine Eins haben, während die anderen Null haben, so dass die mit Null aus dem Spiel sind, weil sie weniger spezifisch sind als die Selektoren zwei und vier mit den IDs.
Da beide Selektoren einen in der Kategorie IDs haben, müssen wir fortfahren und die Klassen überprüfen. Beide haben eine Zwei in dieser Kategorie, die immer noch ein Unentschieden zwischen ihnen hat, und schließlich hat in der Elementkategorie der Selektor zwei eine Zwei, während der Selektor vier nur eine hat, und so haben wir hier einen Gewinner. Der Selektor Nummer zwei ist der spezifischste Selektor von allen und gibt unserer Schaltfläche einen grünen Hintergrund.34 Der Wert der Gewinnerdeklaration wird als kaskadierter Wert bezeichnet, da er das Ergebnis der Kaskade ist.
Wir beginnen also mit einer Reihe deklarierter Werte, in diesem Fall Blau, Grün, Lila und Gelb. Einer von ihnen gewinnt und wird zum kaskadierten Wert, der in unserem Beispiel grün ist.
Stellen Sie sich nun vor, Sektor vier hätte auch zwei Elemente, dann hätten beide Selektoren zwei und vier genau die gleiche Spezifität, richtig. Also, was passiert in diesem Fall und ich verspreche Ihnen, dass es jetzt fast vorbei ist, okay. Wenn zu diesem Zeitpunkt noch ein Gleichstand besteht, gilt die letzte im Code geschriebene CSS-Deklaration. Wenn also alles gleich ist und alle Deklarationsselektoren dieselbe Spezifität haben, ist es einfach die letzte Deklaration, die zum Formatieren des ausgewählten Elements verwendet wird.