Detaillierte Erklärung der CSS-Stil-Kaskadierungsregeln

Der Syntaxstil der CSS-Stilregel ist die Grundeinheit von CSS. Jede Stilregel besteht aus zwei grundlegenden Teilen: Selektor und Deklarationsblock.

Der Selektor bestimmt, auf welche Elemente der Stil angewendet wird.

Der Deklarationsblock definiert den entsprechenden Stil. Er ist in geschweiften Klammern eingeschlossen und besteht aus einer oder mehreren Deklarationen. Jede Deklaration besteht aus einer Eigenschaft und einem Wert, die durch einen Doppelpunkt getrennt sind.

Grammatik:

Attributname 1: Attributwert 1;
Attributname 2: Attributwert 2;
Attributname 3: Attributwert 3;

1. Finden Sie alle Deklarationen, die auf jedes Element und Attribut angewendet werden

Der Browser lädt jede Seite. Jede CSS-Regel wird entsprechend gefunden und zeigt alle betroffenen HTML-Elemente an

2. Nach Reihenfolge und Gewicht sortieren

Dabei prüft der Browser nacheinander jeden der fünf Ursprünge und setzt die passenden Eigenschaften. Wenn das passende Attribut auch in der nächsten Quelle definiert ist, aktualisieren Sie den Wert des Attributs.

5 Quellen: 1. Standard-Stylesheet des Browsers 2. Einstellen der Schriftgröße des Browsers zum Ändern des Standardstils 3. Durch Link referenzierte CSS-Datei 4. Im Stil geschriebener Stilcode 5. Inline-Stil

Gewicht angeben. wie folgt! „wichtig“ wird verwendet, um das Gewicht einer Aussage zu erhöhen. Somit müssen keine weiteren Quellen berücksichtigt werden.

p {color:green !important; font-size:12pt;}

Die Reihenfolge bestimmt das Gewicht. Wenn zwei Regeln die gleiche Eigenschaft eines Elements betreffen und gleich spezifisch sind, gewinnt die Regel, die am weitesten hinten ansteht (oder später deklariert wird).

3. Sortieren nach Spezifität: Die Spezifität gibt an, wie klar eine Regel ist.

p {font-size:12px;} p.largetext {font-size:16px;}

Die zweite Regel hat sowohl einen Tag-Namen als auch einen Klassennamen und ist daher spezifischer. Die zweite Regel überschreibt die erste Regel.

Berechnung der Spezifität: ICE-Formel

1. Wenn der Selektor eine ID enthält, fügen Sie an der Position von I eine 1 hinzu.

2. Wenn der Selektor eine Klasse enthält, addieren Sie 1 zur Position von C.

3. Wenn der Selektor einen Elementnamen (Tag) enthält, fügen Sie an der Position von E eine 1 hinzu.

4. Holen Sie sich eine dreistellige Nummer.

Ok, lass uns den konkreten Abschluss anhand einiger Beispiele erklären.

P 0-0-1 Spezifität = 1

p.largetext 0-1-1 Spezifität=11

p#largetext 1-0-1 Spezifität=101

Körper p#largetext 1-0-2 Spezifität=102

body p#largetext ul.mylist 1-1-3 Spezifität=113 body p#largetext ul.mylist li 1-1-4

Spezifität = 114

Dabei ist jeder Selektor spezifischer als der vorherige.

4. Was sind CSS-Selektoren? Welche Eigenschaften werden vererbt?

1.id-Selektor (#myid)

2. Klassenselektor (.myclassname)

3. Tag-Selektor (div, h1, p)

4. Benachbarter Selektor (h1 + p)

5. Untergeordneter Selektor (ul > li)

6. Nachkommenselektor (li a)

7. Platzhalter-Selektor ( * )

8. Attributselektor (a[rel = "external"])

9. Pseudoklassen-Selektoren (a:hover, li:nth-child)

* Vererbbare Stile: Schriftgröße, Schriftfamilie, Farbe, UL LI DL DD DT;

* Nicht vererbbare Stile: Rahmen, Polsterung, Seitenrand, Breite, Höhe;

Dies ist das Ende dieses Artikels mit der ausführlichen Erläuterung der CSS-Stilkaskadierungsregeln. Weitere relevante Inhalte zur CSS-Stilkaskadierung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!