Wenn Sie nach einer Einführung in die CSS-Spezifität suchen, haben wir diese. Und wenn Sie versuchen, die Nase vorn zu haben, sollten Sie auch CSS Cascade Layers kennen.
Eine Möglichkeit, die CSS-Spezifität zu verstehen, besteht darin, in Begriffen wie "was schlägt was" zu denken oder wie stark die Spezifität ist. Manuel Matuzovic hat eine hilfreiche interaktive Schritt-für-Schritt-Demo. Sie klicken immer wieder auf die Schaltfläche "Selektor hinzufügen", und das angezeigte (und auf der Seite angewendete) CSS ändert sich mit immer stärker werdenden Selektoren, die auf den Body angewendet werden und die background-color ändern. Am Ende weicht es auf nicht wirklich auswählbare Tricksereien aus, wie die Verwendung von @keyframes zum Überschreiben von Dingen.
Mehr Spezifitäts-Übung
Wenn Ihnen die Trickserei am Ende gefallen hat, schauen Sie sich Francisco Dias' A Specificity Battle! an, ein Artikel, den wir vor einigen Jahren veröffentlicht haben und der einen Hin-und-Her-Styling-Kampf mit neunzehn Schritten macht, bei denen dasselbe Element "ausgewählt" wird, um es neu zu gestalten. CSS ist manchmal verrückt.
Für die Mathe-Genies: CSS-Spezifität ist eigentlich nur eine 4-stellige Zahl mit unendlicher Basis.
Oder um 100% pedantisch zu sein: eine 5-stellige Zahl, von der die niedrigsten 4 Stellen unendliche Basis sind und die höchste Ziffer Basis 2 (
!important) ist.