Hallo,
da ich mich momentan in der Planungsphase eines CSS-Validator für Validome befinde, bin ich dabei die entsprechenden W3c-Spezifikationen zu studieren.
Dabei ist mir ein (fehlerhaftes ?) Verhalten aller gängigen Browser aufgefallen, welches nicht so recht den Specs. entspricht.
Es handelt sich dabei um die Spezifität der Selektoren (http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap06.html#heading-6.4.3)
Zunächst ein kleines Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS-Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#p i { color:red; }
#i { color:blue; }
</style>
</head>
<body>
<p id="p"><i id="i">Text</i></p>
</body>
</html>
Dieses Beispiel funktioniert in den gängigen Browser ohne Problem - der Text wird in der Farbe rot dargestellt da der Selektor "#p i" eine höhere Spezifität (101) besitzt als "#i" (100).
Nächstes Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS-Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#p i { color:red; }
</style>
</head>
<body>
<p id="p"><i style="color:blue">Text</i></p>
</body>
</html>
Hier wird der Text (fälschlicherweise ?) in blau dargestellt. Ich hatte immer gedacht das CSS-Eigenschaften innerhalb eines Elementes immer die höchste Priorität genießt (das denken wohl auch alle Browser), die Spezifikation sagt aber in dem obigen Kontext etwas anderes. Dort steht, das CSS-Eigenschaften innerhalb eines style-Attributes sich verhalten als ob sie per ID-Selektor am Ende aller anderen Regeln steht und eine Spezifität von 100 besitzt. Das 2. Beispiel entspricht also im Prinzip dem 1. Beispiel und der Text müsste in roter Farbe erscheinen.
Habe ich etwas falsch verstanden oder übersehen ?
Grüße
Thomas Mell
www.validome.org