最全的CSS hack没有之一

1、何为HACK？ 
简单的说，HACK就是只有特定浏览器才能识别这段hack代码。Hack也可以说是让前端最为头疼的问题，因为要写N多种兼容代码。当然，IE是最让人蛋疼的。

一般来说，CSS HACK有3种表现形式：

• CSS属性前缀法：：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"9"，但firefox对前面三个都不能认识。
• CSS选择器前缀法：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
• IE条件注释法：针对所有IE， <!--[if IE]>IE浏览器显示的内容 <![endif]-->。比如：针对IE6及以下版本： <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效(注：IE10+已经不再支持条件注释)。

下面将对这三种形式一一分析！ 
2、CSS 属性前缀法 
这里提供一个测试实例（所有下面的代码都可以在这个实例里找到）：测试实例 
（1）IE6（_）

.test1 { _color: red; }

（2）IE7及其以下版本（*） 
如下设置，IE7及其以下版本中都会生效：

.test2 { *color: yellow; }

如果是在选择器上设置，则只会在IE6中生效：

*html .test { color: gold; }

（3）IE6/IE7/IE8（9） 
网上的资料说只有IE6/IE7/IE8中生效，可是经测试，在IE9/IE10中也同样生效（如果知道原因的，请告知）：

.test3 { color: purple9; }

（4）IE8/IE9/IE10/IE11（） 
在IE8/IE9/IE10/IE11中生效：

.test4 { color: green0; }

（5）IE6（-） 
在IE6中生效：

.test5 { -color: pink; }

（6）IE6/IE7（+） 
在IE6/IE7中生效：

.test6 { +color: gold; }

（7）IE6/IE7（*+） 
如果在类的属性上加，会在IE6/IE7都生效：

.test7 { *+color: blue; }

如果在选择器上加，只会在IE7生效：

*+html .test { color: black; }

（8）!important 
除了IE6，其他浏览器中都生效：

.test8 { color: #fff !important; }

（9）IE9/IE10（9）

.test9 { color: orange90; }

一般写HACK的顺序：从最新版本到低版本，比如：新版本、IE（10/9/8）、IE（7/6）

color: black;  /* 所有 */

color: white !important; /* 除了IE6外 */

color: orange90; /* IE 9/10 */

color: green0;  /* IE 8/9/10 */

*color: yellow;   /* IE6/7 */

+color: gold;  /* IE6/7 */

*+color: blue; /* IE6/7 */

_color: red;  /* IE6 */

3、CSS选择器前缀法 
（1）* 
只在IE6中生效：

*html .test21 { color: gold; }

（2）*+ 
只在IE7中生效：

*+html .test22 { color: blue; }

（3）IE6/IE7 
在IE6/IE7中生效：

@media screen9 {   

  .test23 { color: purple; }  

}

（4）IE6/IE7/IE8 
在IE6/IE7/IE8中生效：

@media 0screen\,screen9 {   

  .test24 { color: gold; }  

}

（5）IE8 
在IE8中生效：

@media 0screen {   

  .test25 { color: orange; }  

}

（6）IE8/IE9/IE10/IE11 
在IE8/IE9/IE10/IE11中生效：

@media screen0 {   

  .test26 { color: green; }  

}

（7）IE9/IE10/IE11 
在IE9/IE10/IE11中生效：

@media screen and (min- 00) {   

  .test27 { color: red; }  

}

4、条件注释 
下面的N表示版本。 
（1）IE

<!--[if IE]> 所有IE中生效 <![endif]-->

（2）IE N 
比如：只在IE 7中生效：

<!--[if IE 7]>  只在IE7生效 <![endif]-->

注意：版本之间要留空格，比如：IE7是无效的，应该是IE 7。 
（3）gt 
gt符号表示大于运算符。比如：在IE7以上（不包含IE7）生效

<!--[if gt IE 6]>  在IE6以上生效 <![endif]-->

（4）! 
!符号表示非运算符。比如：在IE 6上不生效

<!--[if ! IE 6]>  在IE6上不生效（非IE6生效） <![endif]-->

也可以这样（所有IE都不生效）：

<!--[if ! IE]>  所有IE中都不生效（非IE生效） <![endif]-->

（5）lt 
lt符号表示小于运算符。比如：IE6以下（不包含IE6）版本

<!--[if lt IE 6]>  IE6以下可生效 <![endif]-->

（6）lte 
lte符号表示小于或等于运算符：

<!--[if lte IE 6]>  IE6及IE6以下可生效 <![endif]-->

（7） gte 
gte符号表示大于或等于运算符：

<!--[if gte IE 6]>  IE6及IE6以上可生效 <![endif]-->

（8）& 
&符号表示AND运算符：

<!--[if (gt IE 6)&(lt IE 8)]> IE6版本以上且IE8版本以下可生效 <![endif]-->

（9） | 
|符号表示OR运算符：

<!--[if (IE 6)|(IE 7)]>  IE6或IE7可生效 <![endif]-->

注：IE10+已经不再支持条件注释。 
5、针对其他浏览器的HACK 
（1）针对火狐 
只在火狐中有效：

@-moz-document url-prefix() {

  .test { color: red; }

}

（2）支持所有Gecko内核的浏览器（包括火狐）

*>.test { color: blue; }

（3）针对Webkit内核浏览器

@media all and (min-0px) { color: purple; }

6、CSS选择器的优先级

相同权值情况下，CSS样式的优先级是：就近原则（也就是相同权值的，后设置的优先）：

.a { color: red; }

.b { color: blue; }

<div class="b a">我会是蓝色的，而不是红色</div>

   

优先级规则：

• 内联样式 > 嵌入样式 > 外部样式   
• ID（100） > 类选择符（10） > 标签（1） > 通配选择器（*）
• 在支持!important的情况下，其优先级最高。                 

     转载地址 https://juejin.im/entry/58b3e49a128fe1006ce85416