CSS中!important的使用
生活随笔
收集整理的這篇文章主要介紹了
CSS中!important的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本篇文章使用最新的IE10以及firefox與chrome測試(截止2013年5月27日22:23:22)http://www.cnblogs.com/yudy/archive/2013/05/27/3102825.html
CSS的原理:
我們知道,CSS寫在不同的地方有不同的優先級, .css文件中的定義 < 元素style中的屬性,但是如果使用!important,事情就會變得不一樣。
首先,先看下面一段代碼:
<!DOCTYPE?HTML><html><head><meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"><title>測試Css中的!Important區別</title>?</head>?<style?type="text/css">.testClass{? color:blue?!important; }</style><body><div?class="testClass"?style="color:red;">測試Css中的Important????</div></body></html>雖然元素的style中有testClass類的定義,但是在上面的css定義中的用!important限定的定義卻是優先級最高的,無論是在ie6-10或者Firefox和Chrome表現都是一致的,都顯示藍色。
這種情況也同時可以說明ie6是可以識別!important的,只是這個是ie6的一個缺陷吧。如果寫成下面的樣式,ie6是識別不出來的:
.testClass{? color:blue?!important; color:red; }這樣,在ie6下展示的時候會顯示成紅色。
當然,也可以通過以下方式來讓ie6識別:
.testClass{?
color:blue !important;?
}?
.testClass{?
color:red;?
}
通過以上方式也是可以讓ie6顯示成藍色的。
以上實例說明使用!important的css定義是擁有最高的優先級的。只是在ie6下出了一點小的bug,注意書寫方式一般可以輕松避開的。
本文轉自wiwi博客51CTO博客,原文鏈接http://blog.51cto.com/wiwili/1969152如需轉載請自行聯系原作者wiwili
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的CSS中!important的使用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java jdk下载_jdk1.7下载|
- 下一篇: PN序列自相关特性分析