Ausführliche Erläuterung der CSS-Vererbung und -Kaskadierung

Im vorherigen Abschnitt haben wir vorgestellt, wie man Dokumentstruktur und CSS-Selektoren verwendet, um verschiedene umfangreiche Stile auf Elemente anzuwenden. Lassen Sie uns heute über die Kaskadierung und Vererbung von CSS sprechen.

Vererbung: Der Mechanismus, den ein Element verwendet, um Attributwerte an seine Nachkommenelemente zu übertragen. Vereinfacht ausgedrückt können bestimmte Attribute eines Elements an untergeordnete Elemente weitergegeben werden Nachlass.

Zum Beispiel:

Vererbung testenDies ist nicht der Fall span Der Inhalt in

p{color:red}, hier sehen Sie, dass der Text im p-Element und im Testelement beide rot werden, weil Attribute des p-Elements. Von span geerbt. Einige Attribute können jedoch nicht durch Vererbung weitergegeben werden.
Zum Beispiel wird der Rand nicht durch Vererbung erhalten. Tatsächlich ist die Vererbung leicht zu verstehen, sie muss jedoch zusammen mit der Kaskadierung verstanden werden.

Kaskadierung: Bei der Bestimmung, welche Stile für ein Element verwendet werden sollen, müssen Sie die Besonderheiten der Vererbung und Deklaration gemeinsam berücksichtigen, sodass dieser Prozess aktiviert werden soll Kaskadierung.

Die Besonderheiten sind oben erwähnt, also werfen wir einen Blick darauf.

Lassen Sie mich zunächst eine Frage stellen: Welches der folgenden beiden Regelpaare wird gewinnen?

h1{color:red }
body h1{color:blue}

h2{color:red}
h2.color{color: grün🎜>

Von den beiden oben genannten Regelpaaren kann natürlich nur eines gewinnen, aber welches sollte gewinnen? Die Antwort liegt in der Spezifität jedes Selektors.

Die spezifische Spezifität eines Selektors ist wie folgt:
1 Für jeden in der Regel angegebenen ID-Attributwert wird die Spezifität um 0 erhöht. 1 ,0,0
2. Für jede Klassenauswahl in der Regel, die mit dem Attributselektor und der Pseudoklasse übereinstimmt, wird die Spezifität um 0,0,1,03 .Für jedes Element und Pseudoelement in der Regel beträgt die Spezifität 0,0,0,1
4. Kombinierer und Platzhalter tragen nichts zur Spezifität bei.
5. Die Spezifität von Inline-Stilen wird um 1,0,0,0 erhöht
6. Geerbte Eigenschaften haben keine Spezifität, also nicht einmal 0 sollte niedriger als der Platzhalter sein.
7.!important wird immer gewinnen.

Es gibt also Ergebnisse für die beiden oben genannten Regelsätze:

h1{color:red}                                                                🎜>

Körper h1{color:blue} 0,0,0,2
h2{color:red} 0,0,0,1

h2. color{color:green} 0,0,1,0
Also werden Rot und Grün wirksam.
Die Kaskadenregeln lauten also wie folgt:

1. Finden Sie alle Selektoren in Ihrem Code.

2. Gewichtssortierung und Ursprungssortierung der Regeln anzeigen, markieren! Der wichtige Stil hat Vorrang und hat drei Ursprünge: Produzent, Leser und Benutzeragent.

3. Reihenfolge der Spezifität der Elementdeklarationen.

4. Die Reihenfolge des Erscheinens der Elementdeklarationen.

Ausführlichere Artikel zur CSS-Vererbung und -Kaskadierung finden Sie auf der chinesischen PHP-Website!