头闻号

孟繁刚

护肤膏霜|护肤乳液|洗面奶|化妆水|面膜|眼霜

首页 > 新闻中心 > 科技常识:!important用法使用介绍
科技常识:!important用法使用介绍
发布时间:2023-02-01 09:52:30        浏览次数:2        返回列表

今天小编跟大家讲解下有关!important用法使用介绍 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关!important用法使用介绍 的相关资料,希望小伙伴们看了有所帮助。

*对于Ie系列浏览器都能够识别 firefox 浏览器则不能识别; !important只有Ie7.0和firefox可以识别 但是Ie6.0不能成功应用. (1)区别ie与firefox的hack为: border:2px solid #f00; *border:1px solid #f00; (2)区别Ie6.0 与Ie7.0、firefox的hack为: border:1px solid #f00!important; border:2px solid #f00; 在(1)中 之所以把*放在后面是因为ff不识别*而导致只对它设置了一次border;而ie 系列进行了两次border设置后 后一个属性覆盖了前一个属性 故为一像素的边框。 在(2)中 之所以把!important放在第一个border 设置 是因为它把这次border的优先级提高了 即使后面在一次甚至在N次设置border 也无效 但是Ie6.0对这个规则不接受 而导致它应用了第二次的border 设置 也就是第二次覆盖了第一次的这一原理 并不是它不识别!important;所以它的border为2 像素的红框. CSS 复制代码代码如下: 1 #Box div{ color:red; } 2 .important_false{ color:blue; } 3.important_true{ color:blue !important; } HTML 复制代码代码如下: <div id="Box"> <div class="important_false">这一行末使用important</div> <div class="important_true">这一行使用了important</div> </div> 复制代码代码如下: 第一行字为红色 第二行子为蓝色。 important对 一个良好(或者是标准)的浏览器来说 不仅仅是从顺序上提升代码的优先级 还可以用来提升class的优先级(比如firefox) 但是从IE对前者的不支持可以看出 这只是IE的一大BUG 而不能说它“不认识、不支持”! 在IE中对盒模型(box-model)的解释是有BUG的 IE6.0之前的版本会把某元素的边框值和填充值包含在宽度之内(而不是加在宽度值上)。例如 你可能会使用以下css来指定某个容器的尺寸: 复制代码代码如下: #box   {    width:100px;    border:5px;    padding:20px;   } 然后在html中应用:盒的总宽度在几乎所有浏览器中为150像素(100像素宽度+两条5像素的边框+两个20像素的填充) 唯独在IE6之前版本的浏览器中仍然为100像素(边框值和填充值包含在宽度值中) 使用盒模型的hack可以解决这一问题 复制代码代码如下: #box   {    width:150px;       //这个是错误的width 所有浏览器都读到了    voice-family: \}\;      //IE5.X/win忽略了\}\后的内容    voice-family:inherit;    width:100px;       //包括IE6/win在内的部分浏览器读到这句 新的数值(100px)覆盖掉了旧的   }

来源:爱蒂网