CINXE.COM
Specificity, ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Specificity, ...</title> <style type="text/css"> body { color: #000; background-color: #fff; font-family: andale mono, monospace; } p, div { margin: 0.5em 0; } a:hover { /* specificity [0,1,1] */ color: #c00; } .wtest a:link, .wtest a:visited { /* specificity [0,2,1] */ color: #c00; } div.wtest a.atest { /* specificity [0,2,2] */ color: #090; } div.uno a { /* specificity [0,1,2] */ color: #090; } .due .uno a { /* specificity [0,2,1] */ color: #090; } #tre a { /* specificity [1,0,1] */ color: #090; } p.c12, p.c13, div .c14 { color: #c00; } div .c12, p.c14, body div .c13 { color: #090; } div .c22, .c23 p, div #c26, #c27 p { color: #c00; } .c21 p, div .c24, #c25 p, div #c28 { color: #090; } .c1:first-letter { /* specificity [0,2,1] */ color: #090; } div.c3 div.c2 p.c1 { /* specificity [0,3,3] */ color: #c00; } #i1 { /* specificity [1,0,0] */ color: #c00; } p.c1 span.c4 { /* specificity [0,2,2] */ color: #c00; } #i2 { /* specificity [1,0,0] */ color: #c00; } p.c31 { color: #c00; } body p.c31 { color: #090; color: miao; /* volutamente sbagliato */ } </style> </head> <body> <div class="uno"><a href="#a">el.class a (wrong hover in IE6-/Win)</a>, see <a href="IE6VisitedSpec.html">IE6-/Win: specificity problems with pseudo-classes :hover and :visited</a></div> <div class="due"><div class="uno"><a href="#a">.class1 .class2 a</a></div></div> <div id="tre"><a href="#a">#id a</a></div> <hr /> <div class="wtest"><a class="atest" href="#a">wrong in IE6-/Win</a></div> <hr /> <div><p class="c12">el.class (red), el .class (green) (wrong in IE/Win, IE/Mac and Op7-)</p></div> <div><p class="c14">el .class (red), el.class (green)</p></div> <div><p class="c13">el.class (red), el el .class (green)</p></div> <div class="c23"><p class="c24">.class el (red), el .class (green) (wrong in IE/Win, IE/Mac and Op7-)</p></div> <div class="c21"><p class="c22">el .class (red), .class el (green)</p></div> <div id="c27"><p id="c28">#id el (red), el #id (green) (wrong in IE/Win, IE/Mac and Op7-)</p></div> <div id="c25"><p id="c26">el #id (red), #id el (green)</p></div> <hr /> <p>:first-letter tests</p> <p class="c1">X .class</p> <div class="c3"><div class="c2"><p class="c1">X el.class el.class el.class</p></div></div> <p id="i1" class="c1">X #id (first letter wrong in IE7-/Win)</p> <p class="c1"><span class="c4">X</span> el.class el.class</p> <p class="c1"><span id="i2">X</span> #id</p> <hr /> <p class="c31">wrong in IE7-/Win</p> <hr /> <p><a href="./">CSS tests home</a></p> </body> </html>