史上最适用的最直观的CSS Hack参考手册

最新推荐文章于 2021-03-07 11:39:56 发布

置顶 sunxing007

最新推荐文章于 2021-03-07 11:39:56 发布

阅读量2.6k

点赞数

分类专栏： DHTML CSS 文章标签： css border safari opera chrome class

本文链接：https://blog.csdn.net/sunxing007/article/details/6598327

版权

DHTML CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

把下面的代码保存为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>