CSS:!important使用代碼分享

來源:互聯網
上載者:User
本篇文章使用最新的IE10以及firefox與chrome測試(截止2013年5月27日22:23:22)

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>    <p class="testClass" style="color:red;">        測試Css中的Important    </p></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顯示成藍色的。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.