Wenn Sie CSS regelmäßig verwenden möchten, müssen Sie ein Verständnis dafür entwickeln, was Spezifität ist und wie sie angewendet wird.
Abgesehen von Floats und Positionen ist Spezifität möglicherweise eines der Dinge, an die man sich am schwersten gewöhnen kann, geschweige denn, sie zu meistern. Die Selektoren, die Sie in Ihrem CSS verwenden, haben alle unterschiedliche Gewichtungen und diese werden durch die Spezifität gesteuert. Aus diesem Grund wird die Anwendung einer Regel auf ein Element manchmal nicht in Ihrem Design widergespiegelt.
Wenn Sie sich jemals auf das gefürchtete Schlüsselwort !important verlassen haben, um Ihr CSS zu hacken, dann ist dieser Artikel genau das Richtige für Sie.
Wie ein Browser CSS liest
Um eine solide Grundlage zu schaffen, müssen Sie wissen, wie der Browser CSS tatsächlich liest und wie Regeln außer Kraft gesetzt werden.
Zuerst liest der Browser ein Stylesheet von oben nach unten, was bedeutet, dass mit diesem Code:
/*Zeile 10*/
ul li a {
Farbe Rot;
}
/*Zeile 90*/
ul li a {
Farbe blau;
}
Die von Ihnen in Zeile 10 angegebene Regel wird überschrieben und das Ankertag wird blau angezeigt, da der Browser Regeln weiter unten in Ihrem CSS als eine höhere Priorität ansieht.
Dies funktioniert auch mit der tatsächlichen Reihenfolge, in der Sie Ihre CSS-Dateien importieren, zum Beispiel:
Da Sie die Datei „custom.css“ nach der Datei „style.css“ platziert haben, wird alles, was Sie in die Datei „style.css“ schreiben (vorerst ohne Berücksichtigung der Gewichtung der Selektoren), überschrieben und durch das ersetzt, was in der Datei „custom.css“ enthalten ist. Daher wird diese Technik häufig verwendet von Theme-Erstellern erstellt, um dem Benutzer Raum zu geben, seine eigenen Stile hinzuzufügen, ohne die Hauptdatei zu ändern. (Beachten Sie jedoch, dass „custom.css“ style.css nicht vollständig ersetzt, sondern nur die Regeln, die ausdrücklich überschrieben werden.)
Spezifität
Alles oben Genannte gilt nur, wenn Sie auf jedem Selektor das gleiche Gewicht verwenden. Wenn Sie IDs, Klassen oder Stapelelemente angeben, geben Sie ihnen Gewicht, und das ist Spezifität.
Es gibt vier Kategorien, die den Spezifitätsgrad eines Selektors definieren: Inline-Stile (diese werden manchmal von Javascript verwendet), IDs, Klassen und Elemente. Wie misst man die Spezifität? Die Spezifität wird in Punkten gemessen, wobei der höchste Punktwert angewendet wird.
- Ausweise sind 100 Punkte wert.
- Für den Unterricht werden 10 Punkte vergeben.
- Elemente sind 1 Punkt wert.
Wenn Sie dies wissen und einen Selektor wie diesen verwenden:
#content .sidebar .module li a
Sein Gesamtgewicht beträgt 122 Punkte (100 + 10 + 10 + 1 +1), was einer ID, zwei Klassen und zwei Elementen entspricht.
Dinge, an die man sich erinnern sollte
- IDs haben im Vergleich zu Klassen und Elementen viel zu viel Gewicht, daher sollten Sie die Verwendung von IDs in Ihren Stylesheets auf das Nötigste beschränken.
- In Fällen, in denen die Selektoren das gleiche Gewicht haben, wird die Reihenfolge, in der sie erscheinen, zurückgesetzt, wobei letztere die höhere Priorität hat.
- In Ihr HTML eingebettete Stile haben Vorrang vor Stilen in Stylesheets, da sie näher am Element liegen.
- Die einzige Möglichkeit, Inline-Stile zu überschreiben, ist die Verwendung der !important-Anweisung.
- Pseudoklassen und Attribute haben das gleiche Gewicht wie normale Klassen.
- Pseudoelemente haben außerdem das gleiche Gewicht wie ein normales Element.
- Der universelle Selektor
Hält kein Gewicht.
Beispiele
ul li a {
Farbe Rot;
}
Dieser Selektor hat eine Gewichtung von 3 , was bedeutet, dass Sie diese überschreiben können, indem Sie an einer anderen Stelle eine Klasse hinzufügen.
.content #sidebar {
Breite: 30 %;
}
Dieser Selektor hat eine Gewichtung von 110 Punkten, hauptsächlich aufgrund der ID, die 100 der insgesamt 110 Punkte hinzufügt.
.post p:first-letter {
Schriftgröße: 16px;
}
Dieser Selektor hat eine Gewichtung von 12 Punkten, da das Pseudoelement :first-letter nur 1 Punkt wiegt, ebenso wie das p-Tag.
P {
Schriftfamilie: Helvetica, Arial, Sans-Serif;
}
Dieser Selektor wiegt nur 1 Punkt. Dieser Selektortyp sollte oben auf der Seite verwendet werden, wenn Sie die grundlegenden Stile markieren, die später für bestimmte Bereiche überschrieben werden können.
Denken Sie immer daran, dass Sie zum Überschreiben eines ID-Selektors 256 Klassen für dasselbe Element schreiben müssen, etwa so:
#Titel {
Schriftdicke: fett;
}
.home .page .content .main .posts .post .post-content .headline-area .wrapper /* … etc. … */ .title {
Schriftstärke: normal;
}
Nur so wird der zweite Selektor denjenigen schlagen, der die ID verwendet.
Abschluss
Spezifität ist kein auffälliger Aspekt von CSS, aber meiner Meinung nach ist es der Bereich, der am meisten übersehen wird. Die richtige Spezifität hilft Ihnen nicht nur, Fehler zu vermeiden, sondern beschleunigt auch Ihre Entwicklung und Ihre endgültige Website.
Verwenden Sie beim Schreiben von CSS zu häufig IDs? Greifen Sie jemals auf !important zurück? Lass es uns in den Kommentaren wissen. Ausgewähltes Bild/Miniaturansicht, Präzisionsbild
über Shutterstock.
