Christian Kruse: CSS-Rätsel zum Wochenende

Beitrag lesen

Hallo MudGuard,

Wenn das Stylesheet eingebunden wäre, würde magenta rauskommen, weil das der Selektor mit der höchsten Specificity ist.

Ich löse mal auf. Ich hatte auch auf Magenta getippt. Es kommt aber darauf an, was der Browser kann. In der Spec heisst es, dass in Level 3 nur Simple Selectors erlaubt sind. p#foo ist aber keiner. Deshalb wird in Level 3 der Selektor ignoriert und das A wird gelb: :not(#baz) hat dann die höchste Spezifität, sichtbar in Firefox und Chrome. Der Safari kann allerdings schon Level 4, und dort ist das A tatsächlich auch Magenta, weil p#foo dann die höchste Spezifität hat. Beides ist allerdings korrekt ;-)

LG,
CK