Abonnieren
In der täglichen Arbeit mit CSS stoße ich immer wieder auf das Phänomen, dass eine Stildefinition scheinbar keine Auswirkung hat. Zum Beispiel definiere ich in einen längeren Stylesheet: p {line-height: 1.6em} und es wirkt sich nicht aus. Erst wenn ich diverse, früher eingeführte Selektoren davor setze, funktioniert es: #inhalt #linkeSpalte p {...}. Der Grund war mir bisher nicht klar, erst ein Tipp in der deutschen Typo3-Mailingliste hat mich auf die richtige Spur gebracht.
Wann sich ein Selektor oder eine Selektorkombination durchsetzt wird als »Spezifität eines Selektors« bezeichnet. Und natürlich gibt es bei w3c eine exakte Definition dafür, die ich mir bisher nie genau angesehen habe. Leider, sonst hätte ich mit derartigen Problemen nicht so viel Zeit verschwendet. Da ich diese Definition für sehr wichtig halte und sie in den einschlägigen CSS-Büchern kaum erwähnt wird, möchte ich sie hier kurz darstellen. Das englische Original ist hier zu finden.
Die Spezifität eines Selektors wird über vier getrennte Schritte (a, b, c und d) bestimmt, die jeweils eine Ziffer ergeben. Diese Ziffern werden dann zu einer Zahl zusammengesetzt:
a b c d 0 0 1 2
Die Definition mit der höheren Zahl (= höheren Spezifität) entscheidet darüber, welche Definition sich durchsetzt.
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
Und schon wird völlig klar, wann sich welcher Selektor durchsetzt ... Es ist also nicht nur die Reihenfolge, wie ich fälschlicherweise immer geglaubt habe. Im Gegenteil: die Reihenfolge spielt nur eine Rolle, wenn die Selektoren die gleiche Spezifität haben.
Damit erklärt sich auch mein eingangs geschildertes Problem: Wenn ich irgendwo im Quelltext mal #inhalt p {} definiert habe, kann ich das nicht mit p {} ausser Kraft setzen. Der erste Fall hat die Spezifität 0.1.0.1 und der zweite nur 0.0.0.1. Erst wenn ich auch bei der zweiten Definition einen ID-Selektor davor setze, wird es funktionieren.
Von Peter am 02.06 um 11:00 Uhr. Kategorie: HTML-CSS | Netzwelt
Trackback-URL: http://www.lisardo.biz/trackback/437/Wb1fMJcf/