继续探究HTML与CSS:!important 和 @import 规则

!important:

摘自:

浏览器支持情况: firefox支持 IE不支持

!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权,语法格式{ sRule!important },即写在定义的最后面,并且在分号之前,比如:

{font-color: red !important;}

由于IE并不支持该语法,所以我们可以利用这一点解决部分CSS的浏览器兼容问题。

在页面设计中,需要将布局定义相关部分改为:{margin-right: -2px !important margin-right: 0px;},这样Firefox仍然使用前一部分的margin定义,而IE则使用后一部分margin定义,立即试用,果然在IE下浏览正常了。

总结 由于css是采用越接近越优先的原则,同一个定义,比如{margin: 2px;margin: 0px;},在IE和firefox中就会解释成{margin: 0px;};而使用了!important之后,!important对firefox有效,对IE无效,故{margin: 2px !important; margin: 0px;},在firefox中解释为{margin:2px;},在IE中解释为{margin:2px;}

!important用来让firefox支持前面的定义,忽略后面的定义

!important对IE无效,IE依然会采用后面的定义,即后面的定义有效,前面的无效。

@import

使用 @import url("CSS路径") 媒体类型列表(可选) 导入外部CSS样式表

如:

h1{ color: red ;}

h2{ font-family: sans-serif ;}

@import "sitewide.css" ;

/* sitewide.css */

h1,h2,h3{ color: green ;}

body{ background-color : silver ;}

拓展:

!important: 摘自: 浏览器支持情况: firefox支持 IE不支持 !important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权,语法格式{ sRule!important },即写在定义的最后面,并且在分号之前,比如: {font-color: red !important;} 由于IE并不支持该语法,所以我们可以利用这一点解决部分CSS的浏览器兼容问题。 在页面设计中,需要将布局定义相关部分改为:{margin-right: -2px !important margin-right: 0px;},这样Firefox仍然使用前一部分的margin定义,而IE则使用后一部分margin定义,立即试用,果然在IE下浏览正常了。 总结 由于css是采用越接近越优先的原则,同一个定义,比如{margin: 2px;margin: 0px;},在IE和firefox中就会解释成{margin: 0px;};而使用了!important之后,!important对firefox有效,对IE无效,故{margin: 2px !important; margin: 0px;},在firefox中解释为{margin:2px;},在IE中解释为{margin:2px;} !important用来让firefox支持前面的定义,忽略后面的定义 !important对IE无效,IE依然会采用后面的定义,即后面的定义有效,前面的无效。 @import 使用 @import url("CSS路径") 媒体类型列表(可选) 导入外部CSS样式表 如: h1{ color: red ;} h2{ font-family: sans-serif ;} @import "sitewide.css" ; /* sitewide.css */ h1,h2,h3{ color: green ;} body{ background-color : silver ;} 拓展:
经验分享 程序员 微信小程序 职场和发展