今天小编跟大家讲解下有关css中提升优先级属性!important的用法总结 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css中提升优先级属性!important的用法总结 的相关资料,希望小伙伴们看了有所帮助。
复制代码代码如下: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>无标题文档</title> <style> <!-- !important只有Ie7.0和firefox可以识别 但是Ie6.0不能成功应用.!important提升优先级(或看成强制重定义--> <!-- !important是CSS1就定义的语法 作用是提高指定样式规则的应用优先权(参见:W3.org的解释)。语法格式 { sRule!important } 即写在定义的最后面 例如:box { color:red !important; } 假如我们定义一个这样的样式: #box { background-color: #ffffff !important; background-color: #000000; } 那么在支持该语法的浏览器 如Firefox、Opera中 能够理解!important的优先级 背景显示#cccccc颜色 而在IE中则显示#000000.能说它“不认识、不支持”! --> #box div { color:red; } .important_false { color:blue; } .important_true { color:blue !important; } #box2 { background-color: #cccccc !important; background-color: #000000; } <!-- firefox: 下面这段如果放在最上面 则是红色的 如果放在最下面则是blue。说明如果放在最上面 #box div覆盖了#idColor 这时是id的优先级。而.important_false的class优先级小于id 没有覆盖掉#box div。 如果放在最下面 则#idColor没有覆盖.important_false。 如果不设置id="idColor", 则是blue。说明.important_false 覆盖掉了#box div IE7: #idColor放在最下面 是红色的。放在最下面也是红色的 去掉id属性。也是红色的。说明都没覆盖#box div。 --> #idColor { color:gray; } </style> </head> <body> <div id="box"> <div class="important_false"id="idColor">这一行末使用important。class的优先级小于id的优先级。IE7是红色 firefox是蓝色。</div> <div class="important_true">这一行使用了important</div> </div> <div id="box2"> 在不同的浏览器下 这行字的色应该不同!IE7 Firefox是红色。IE6是蓝色</div> </body> </html>来源:爱蒂网