手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css important终级讲解
css important终级讲解
摘要:例一:CSS#box{color:red!important;color:blue;}HTML在不同的浏览器下,这行字的色应该不同!这个例子...

例一:

CSS

#box {

color:red !important;

color:blue;

}

HTML

<div id="Box"> 在不同的浏览器下,这行字的色应该不同!</div>

这个例子应该是大家经常见到的important的用法了,在IE环境下,这行字是蓝色,在firefox下,为红色,其用法不再多说了,看下一个例子。

例二:

CSS

1 #box div{

color:red;

}

2 .important_false{

color:blue;

}

important_true{

color:blue !important;

}

HTML

<div id="Box">

<div>这一行末使用important</div>

<div>这一行使用了important</div>

</div>

例二中,CSS代码第一行设定了box里面所有div中字体色为红色,第二行和第三行都用class重新定义了自身div的字体色为蓝色,不同的是,第二行末使用important,而第三行使用了!

默认情况下,class的优先级小于id,所以,第二行中即使用class重定义了自身样式,也无法生效,所以继承父级属性,这行字还是红色!

但是,第三行中,用了important提升优先级(或看成强制重定义),所以这里的css得以生效,这行字变为了蓝色!

从这个例子,得以证明,ie对important的并不是不支持!

那么为什么很多人都说ie不认识它呢?我想应该是大家实战中可能都没有遇到例子中的情况: 当你想提升class的优先级时怎么办?

也就是说大家可能都忽略了它的这一作用,只了解在命名为同一个元素的CSS代码块中,用它来提升排列顺序相对靠前的代码的优先级(例一)!

通过上边两个例子,得以总结:

important对 一个良好(或者是标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升class的优先级(比如firefox),但是从IE对前者的不支持可以看出,这只是IE的一大BUG,而不能说它“不认识、不支持”!

然而,不管怎么样,IE的这一大BUG帮助我们解决了很多兼容性问题,这显然不是件坏事!

【css important终级讲解】相关文章:

CSS 平级和儿子级样式写法示例

CSS实现带箭头的DIV提示框

css串联选择器和后代选择器使用方法

css中input标签与图片按钮对不齐怎么办

css3 border-image使用说明

Div 在页面中居中

纯CSS做的带开关的台灯

DIV边距属性在Chrome和IE中不兼容问题

根据用户浏览器及分辨率调用不同的CSS样式文件

CSS如何制作一个向各个方向延展box?

精品推荐
分类导航