CSS hack合集
CSS HACK
,在这里简单地总结一下!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+已经不再支持条件注释)。
.test1 { _color: red; }
.test2 { *color: yellow; }
*html .test { color: gold; }
.test3 { color: purple\9; }
.test4 { color: green\0; }
.test5 { -color: pink; }
.test6 { +color: gold; }
.test7 { *+color: blue; }
*+html .test { color: black; }
.test8 { color: #fff !important; }
.test9 { color: orange\9\0; }
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 */
*html .test21 { color: gold; }
*+html .test22 { color: blue; }
@media screen\9 {
.test23 { color: purple; }
}
(4)IE6/IE7/IE8
@media \0screen\,screen\9 {
.test24 { color: gold; }
}
(5)IE8
@media \0screen {
.test25 { color: orange; }
}
(6)IE8/IE9/IE10/IE11@media screen\0 {
.test26 { color: green; }
}
(7)IE9/IE10/IE11
@media screen and (min-width: 0\0) {
.test27 { color: red; }
}
<!--[if IE]> 所有IE中生效 <![endif]-->
<!--[if IE 7]> 只在IE7生效 <![endif]-->
<!--[if gt IE 6]> 在IE6以上生效 <![endif]-->
<!--[if ! IE 6]> 在IE6上不生效(非IE6生效) <![endif]-->
<!--[if ! IE]> 所有IE中都不生效(非IE生效) <![endif]-->
<!--[if lt IE 6]> IE6以下可生效 <![endif]-->
<!--[if lte IE 6]> IE6及IE6以下可生效 <![endif]-->
<!--[if gte IE 6]> IE6及IE6以上可生效 <![endif]-->
<!--[if (gt IE 6)&(lt IE 8)]> IE6版本以上且IE8版本以下可生效 <![endif]-->
<!--[if (IE 6)|(IE 7)]> IE6或IE7可生效 <![endif]-->
@-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
的情况下,其优先级最高。
参考文章:
如果发现有错误,欢迎在下方评论区指正!