CSS -Prioritätsregeln (Gewicht)
Wussten Sie, dass CSS jeder Stilregel eine bestimmte Gewichtung zuweist? Dies ist genau der Aspekt von CSS, da dadurch Inkonsistenzen zwischen dem, was Sie erhalten möchten, und dem, was Sie in der Realität erhalten, vermieden werden.
Ein Beispiel:
Versuchen Sie den folgenden HTML-Code:
div {Hintergrundfarbe: blau;} Als Ergebnis erhalten Sie ein blaues Quadrat von 100X100 px.
Fügen Sie nun eine Klasse hinzu:
div {Hintergrundfarbe: blau;}. MaDiv {Hintergrundfarbe: rot;} Das Quadrat wurde rot!
Verwenden Sie jetzt eine ID:
div {Hintergrundfarbe: blau;} .maDiv {Hintergrundfarbe: rot;} #maDiv {Hintergrundfarbe: gelb;} Das Quadrat ist jetzt gelb, weil die ID stärker ist als die Klasse.
Verwenden Sie als Nächstes einen definierten Stil für die Tags:
div {Hintergrundfarbe: blau;}. MaDiv {Hintergrundfarbe: rot;} # MaDiv {Hintergrundfarbe: gelb;} Das Quadrat wird grün: Theoretisch wurden ihm vier verschiedene Farben zugewiesen!
Die Gewichte
Diese Ergebnisse sind die Konsequenzen des Gewichts (auch Prioritätsregeln genannt) CSS:
- Das Gewicht eines Tags beträgt 1
- Das Gewicht einer Klasse beträgt 10.
- Das Gewicht eines Ausweises beträgt 100.
- Das Gewicht eines Stilattributs beträgt 1000.
Dies sind die Grundgewichte, es gibt andere, zum Beispiel Pseudoklassen (: Schweben, : Nachher, : Fokussieren ...). Beispiel: Das CSS-Attribut: hover fügt einem Element nur dann eine geringe Gewichtung hinzu, wenn der Mauszeiger darüber bewegt wird.
Die Anhäufung von Gewicht
Eine Stilregel kann dann ein Zwischengewicht haben. Tatsächlich ist der Gewichtsstapel.
Beispiel:
div {Hintergrundfarbe: blau;} .maDiv {Hintergrundfarbe: rot;} .maDiv {Hintergrundfarbe: gelb;} Wie Sie sehen, habe ich ein Element (Gewicht 1) und zwei gleiche Klassen (Gewicht 10): Das letzte Element übernimmt und unser Quadrat ist gelb. Nun nach dem Hinzufügen
div {Hintergrundfarbe: blau;} div.maDiv {Hintergrundfarbe: rot;} .maDiv {Hintergrundfarbe: gelb;} Das Quadrat wird rot. Warum?
- ".maDiv" - 10
- "div.maDiv" kombiniert ein Element und eine Klasse - 11!
Warnung: Manchmal reicht das Hinzufügen einer Klasse zu einer Regel nicht aus, um die Gewichtung aller beteiligten Elemente zu erhöhen.
Beachten Sie, dass
Vergleichen Sie das Ergebnis dieses Codes:
div {Hintergrundfarbe: blau;} div # maDiv {Hintergrundfarbe: rot;} Mit dem Ergebnis dieses einen:
div {Hintergrundfarbe: blau;} div #maDiv {Hintergrundfarbe: rot;} Im ersten Fall ist unsere Div rot, im zweiten Fall ist es blau!
"Aber warum, das Element + ID =, also sollte es immer rot sein!"
Beachten Sie den feinen Unterschied:
- div # maDiv : Gilt für div mit der ID "maDiv".
- div #maDiv : Gilt für alle Elemente, deren ID "maDiv" ist und die in einem übergeordneten Element namens "div" enthalten sind.
Unser Quadrat befasst sich nur mit der ersten Regel. Achten Sie in der Regel immer darauf, wie Sie Ihre Regeln schreiben, verwenden Sie Leerzeichen, Kommas usw. richtig
Beispiele:
- p .myClass a {} : für alle Links, die in einem Element enthalten sind, dessen Klasse "myClass" ist, alle in any
Element. Gewicht: 12
- p.myClass, ein {} : für alle Links und alle
deren Klasse ist "myClass". Gewicht: 11 oder 1
- p, .myClass, a {} : für alle Links und alle Elemente, deren Klasse "myClass" ist, und alle
Element. Gewicht: 1 bis 10 oder 1