css中hack的原理

1、浏览器对CSS样式的支持程度、分析结果和识别CSS的优先级,可以根据这些的特征写出不同的CSS样式代码。

2、IE6可以识别下划线和星号*,IE7可以识别星号*,不能识别下划线_。

firefox两者都不能识别,IE6.IE7和FF可以通过使用这些特殊符号来写出不同的代码。

实例

/*****SelectorHacks******/
/*IE6andbelow*/
*html#uno{color:red}

/*IE7*/
*:first-child+html#dos{color:red}

/*IE7,FF,Saf,Opera*/
html>body#tres{color:red}

/*IE8,FF,Saf,Opera(EverythingbutIE6,7)*/html>/**/body#cuatro{color:red}

/*Opera9.27andbelow,safari2*/
html:first-child#cinco{color:red}

/*Safari2-3*/
html[xmlns*=""]body:last-child#seis{color:red}

/*safari3+,chrome1+,opera9+,ff3.5+*/
body:nth-of-type(1)#siete{color:red}

/*safari3+,chrome1+,opera9+,ff3.5+*/
body:first-of-type#ocho{color:red}

/*saf3+,chrome1+*/
@mediascreenand(-webkit-min-device-pixel-ratio:0){#diez{color:red}}

/*iPhone/mobilewebkit*/
@mediascreenand(max-device-width:480px){
#veintiseis{color:red}
}

/*Safari2-3.1*/
html[xmlns*=""]:root#trece{color:red}

/*Safari2-3.1,Opera9.25*/
*|html[xmlns*=""]#catorce{color:red}

/*EverythingbutIE6-8*/
:root*>#quince{color:red}

/*IE7*/
*+html#dieciocho{color:red}

/*Firefoxonly.1+*/
#veinticuatro,x:-moz-any-link{color:red}

/*Firefox3.0+*/
#veinticinco,x:-moz-any-link,x:default{color:red}

以上就是css中hack的原理,希望对大家有所帮助。更多css学习指路:css教程

原文来自:https://www.py.cn
© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容