把下面的代码保存为html, 然后在不同的浏览器中打开, 则CSS Hack一目了然. 试一下你就知道了.
当然可能大师在总结这个列表的时候,一些浏览器还没有出来,比如IE9, Chrome12等等, 所以部分结论可能对这些最新的浏览器不成立。
如图是我在FF下的观测结果:
<!DOCTYPE html> <html> <head> <title>Demo | CSS Hacks</title> <style type="text/css"> /***** Selector Hacks ******/ /* IE6 and below */ * html #uno { background: #FFDECE; border: 2px solid #ff0000 } /* IE7 */ *:first-child+html #dos { background: #FFDECE; border: 2px solid #ff0000 } /* IE7, FF, Saf, Opera */ html>body #tres { background: #FFDECE; border: 2px solid #ff0000 } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html>/**/body #cuatro { background: #FFDECE; border: 2px solid #ff0000 } /* Opera 9.27 and below, safari 2 */ html:first-child #cinco { background: #FFDECE; border: 2px solid #ff0000 } /* Safari 2-3 */ html<span style="font-weight: bold;">[xmlns*=""]</span> body:last-child #seis { background: #FFDECE; border: 2px solid #ff0000 } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nth-of-type(1) #siete { background: #FFDECE; border: 2px solid #ff0000 } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ #sietepointfive:nth-of-type(1n) { background: #FFDECE; border: 2px solid #ff0000 } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:first-of-type #ocho { background: #FFDECE; border: 2px solid #ff0000 } /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { #diez { background: #FFDECE; border: 2px solid #ff0000 } } /* Safari 2 - 3.1 */ html<span style="font-weight: bold;">[xmlns*=""]</span>:root #trece { background: #FFDECE; border: 2px solid #ff0000 } /* Safari 2 - 3.1, Opera 9.25 */ *|html<span style="font-weight: bold;">[xmlns*=""]</span> #catorce { background: #FFDECE; border: 2px solid #ff0000 } /* Everything but IE6-8 */ :root *> #quince { background: #FFDECE; border: 2px solid #ff0000 } /* IE7 */ *+html #dieciocho { background: #FFDECE; border: 2px solid #ff0000 } /* Opera 9+, Chrome2+, Saf4+, FF3.5+*/ @media all and (min-width: 0px){ #veintitres{ background: #FFDECE; border: 2px solid #ff0000 } } /* Opera 9+, Chrome2+, Saf4+, FF3.0+*/ /* assumes attribute/value on html tag */ html:lang(en)>body #veintiuno { background: #FFDECE; border: 2px solid #ff0000 } /* Opera 9+, Chrome2+, Saf4+, FF3.5+*/ body:nth-of-type(1) #veintidos { background: #FFDECE; border: 2px solid #ff0000 } /* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { background: #FFDECE; border: 2px solid #ff0000 } /* Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default { background: #FFDECE; border: 2px solid #ff0000 } /* unknown ---Hides from IE6--- */ * > #dieciseis { background: #FFDECE; border: 2px solid #ff0000 } /* unknown */ html:only-child #nueve { background: #FFDECE; border: 2px solid #ff0000 } /***** Attribute Hacks ******/ /* IE6 */ #once { _background: #C4D6FD; _border: 2px solid #0000FF} /* IE6, IE7 */ #doce { *background: #C4D6FD; *border: 2px solid #0000FF} /* IE6, IE7 */ #veintiseis { .background: #C4D6FD; .border: 2px solid #0000FF} /* Everything but IE6 */ #diecisiete { background /**/: #C4D6FD; border /**/: 2px solid #0000FF} /* IE6, IE7, IE8 */ #diecinueve { background : #C4D6FD\9; border : 2px solid #0000FF\9;} /* IE7, IE8 */ #veinte { background /*\**/: #C4D6FD\9; border /*\**/: 2px solid #0000FF\9} /* IE6, IE7 -- acts as an !important */ /* string after ! can be anything */ #veintisiete { background: #C4D6FD !ie; border: 2px solid #0000FF !ie; } .test{ margin: 5px 0; } </style> </head> <div id="container"> <h1>Selector hacks</h1> <div class="test" id="uno">Red if <code>* html</code> matches in this browser. <span style="font-weight: bold;">[IE6 and below ]</span></div> <div class="test" id="dos">Red if <code>*:first-child+html </code> matches in this browser. <span style="font-weight: bold;">[IE7]</span></div> <div class="test" id="tres">Red if <code>html>body</code> matches in this browser <span style="font-weight: bold;">[IE7, FF. Saf, Opera]</span></div> <div class="test" id="cuatro">Red if <code>html>/**/body </code> matches in this browser. <span style="font-weight: bold;">[IE8, FF, Saf, Opera (Everything but IE 6,7)]</span></div> <div class="test" id="cinco">Red if <code>html:first-child</code> matches in this browser. <span style="font-weight: bold;">[Opera 9.27 and below, safari 2]</span></div> <div class="test" id="seis">Red if <code>html<span style="font-weight: bold;">[xmlns*=""]</span> body:last-child</code> matches in this browser. <span style="font-weight: bold;">[Safari 2-3]</span></div> <div class="test" id="siete">Red if <code>body:nth-of-type(1)</code> matches in this browser. <span style="font-weight: bold;">[safari 3+, chrome 1+, opera9+, ff 3.5+]</span></div> <div class="test" id="sietepointfive">Red if <code>div:nth-of-type(1n)</code> matches in this browser. <span style="font-weight: bold;">[safari 3+, chrome 1+, opera9+, ff 3.5+]</span></div> <div class="test" id="ocho">Red if <code>body:first-of-type</code> matches in this browser. <span style="font-weight: bold;">[safari 3+, chrome 1+, opera9+, ff 3.5+]</span></div> <div class="test" id="diez">Red if <code>@media screen and (-webkit-min-device-pixel-ratio:0)</code> matches in this browser. <span style="font-weight: bold;">[saf3+, chrome1+ ]</span></div> <div class="test" id="trece">Red if <code>html<span style="font-weight: bold;">[xmlns*=""]</span>:root</code> matches in this browser. <span style="font-weight: bold;">[Safari 2 - 3.1]</span></div> <div class="test" id="catorce">Red if <code>*|html<span style="font-weight: bold;">[xmlns*=""]</span></code> matches in this browser. <span style="font-weight: bold;">[Safari 2 - 3.1, Opera 9.25]</span></div> <div class="test" id="quince">Red if <code>:root *></code> matches in this browser. <span style="font-weight: bold;">[Everything but IE6-8]</span></div> <div class="test" id="dieciocho">Red if <code>*+html</code> matches in this browser. <span style="font-weight: bold;">[IE7]</span></div> <div class="test" id="deiciseis">Red if <code>* ></code> matches in this browser. <span style="font-weight: bold;" title="test and find that it does not work in Chrome 12+">[Opera 9+, Chrome2+, Saf4+, FF3.5+]</span></div> <div class="test" id="nueve">Red if <code>html:only-child</code> matches in this browser. <span style="font-weight: bold;" title="test and find that it does not work in Chrome 12+">[Opera 9+, Chrome2+, Saf4+, FF3.0+, assumes attribute/value on html tag]</span></div> <div class="test" id="veintitres">Red if <code>@media all and (min-width: 0px)</code> matches in this browser. <span style="font-weight: bold;">[Opera 9+, Chrome2+, Saf4+, FF3.5+]</span></div> <div class="test" id="veintiuno">Red if <code>html:lang(en)>body </code> matches in this browser. <span style="font-weight: bold;">[Firefox only. 1+]</span></div> <div class="test" id="veintidos">Red if <code>body:nth-of-type(1)</code> matches in this browser. <span style="font-weight: bold;">[Firefox 3.0+]</span></div> <div class="test" id="veinticuatro">Red if <code> x:-moz-any-link</code> matches in this browser. <span style="font-weight: bold;">[unknown ---Hides from IE6---]</span></div> <div class="test" id="veinticinco">Red if <code> x:-moz-any-link, x:default</code> matches in this browser. <span style="font-weight: bold;">[unknown]</span></div> <h1>Attribute hacks</h1> <div class="test" id="once">Blue if <code>div { _background: blue}</code> matches in this browser. <span style="font-weight: bold;">[IE6]</span></div> <div class="test" id="doce">Blue if <code>div { *background: blue}</code> matches in this browser. <span style="font-weight: bold;">[IE6, IE7]</span></div> <div class="test" id="veintiseis">Blue if <code>div { .background: blue}</code> matches in this browser. <span style="font-weight: bold;">[IE6, IE7]</span></div> <div class="test" id="diecisiete">Blue if <code>div { background/**/: blue}</code> matches in this browser. <span style="font-weight: bold;">[Everything but IE6]</span></div> <div class="test" id="diecinueve">Blue if <code>div { background: blue\9;}</code> matches in this browser. <span style="font-weight: bold;">[IE6, IE7, IE8]</span></div> <div class="test" id="veinte">Blue if <code>div { background/*\**/: blue\9;}</code> matches in this browser. <span style="font-weight: bold;">[IE7, IE8]</span></div> <div class="test" id="veintisiete">Blue if <code>div { background: blue !ie;}</code> matches in this browser. <span style="font-weight: bold;">[IE6, IE7 -- acts as an !important, string after ! can be anything]</span></div> </div> </body> </html>