最全的CSShack没有之⼀
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: purple\9; }
（4）IE8/IE9/IE10/IE11（\0）
在IE8/IE9/IE10/IE11中⽣效：
.test4 { color: green\0; }
（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\0）
.test9 { color: orange\9\0; }
⼀般写HACK的顺序：从最新版本到低版本，⽐如：新版本、IE（10/9/8）、IE（7/6）color: black;  /* 所有 */
color: white !important; /* 除了IE6外 */
color: orange\9\0; /* IE 9/10 */
color: green\0;  /* 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 screen\9 {
.test23 { color: purple; }css样式表优先级最高
}
（4）IE6/IE7/IE8
在IE6/IE7/IE8中⽣效：
@media \0screen\,screen\9 {
.
test24 { color: gold; }
}
（5）IE8
在IE8中⽣效：
@media \0screen {
.test25 { color: orange; }
}
（6）IE8/IE9/IE10/IE11
在IE8/IE9/IE10/IE11中⽣效：
@media screen\0 {
.test26 { color: green; }
}
（7）IE9/IE10/IE11
在IE9/IE10/IE11中⽣效：
@media screen and (min-width: 0\0) {
.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-width:0px) { color: purple; }
6、CSS选择器的优先级
相同权值情况下，CSS样式的优先级是：就近原则（也就是相同权值的，后设置的优先）：.a { color: red; }
.b { color: blue; }
<div class="b a">我会是蓝⾊的，⽽不是红⾊</div>
优先级规则：
内联样式 > 嵌⼊样式 > 外部样式
ID（100） > 类选择符（10） > 标签（1） > 通配选择器（*）
在⽀持!important的情况下，其优先级最⾼。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。