Schneller Tipp CSS-Spezifität verstehen

Das "C" in CSS steht für kaskadieren. Das bedeutet, dass Stilregeln, die später im Stylesheet angezeigt werden, Regeln überschreiben, die zuvor angezeigt wurden. Dies ist jedoch nicht immer der Fall. Es gibt noch etwas, das Sie berücksichtigen müssen: Spezifität. In diesem kurzen Tipp zeige ich Ihnen, wie Sie genau das tun.

Spezifitätsregeln

CSS-Spezifität ist im Grunde Folgendes: Je spezifischer Ihr Selektor ist, desto mehr Priorität hat er. Um herauszufinden, welche Selektoren mehr wert sind, verwenden Sie dieses System:

• Geben Sie jedem HTML-Elementselektor einen Punkt. Beispiel: p
• Geben Sie jedem Klassenwähler 10 Punkte. Beispiel: Spalte
• Geben Sie jedem ID-Wähler 100 Punkte. Beispiel: #wrap
• Addieren Sie die Punkte für jedes Stück des Wählers, um den vollen Wert des Wählers zu erhalten.

Zum Beispiel

 #test Hintergrund: rot;  / * Spezifität: 100 * / .item p Hintergrund: grün;  / * Spezifität: 10 + 1 = 11 * / p Hintergrund: Orange;  / * Spezifität: 1 * / body #wrap p Hintergrund: gelb;  / * Spezifität: 1 + 100 + 1 = 102 * /