css !important用法CSS樣式使用優先級判斷


例一:

CSS

#box {
      color:red !important;
      color:blue;
 }

HTML

<div id="Box"> 在不同的瀏覽器下,這行字的色應該不同!</div>

這個例子應該是大家經常見到的important的用法了,在IE6環境下,這行字是藍色,在IE7及firefox下,為紅色。這是因為IE6不認important(即不認 !importmant 但是還是認!important前面的color:red),並且color:blue放在color:red的后面(后面的css定義覆蓋了前面的color:red),所以在IE6下字為藍色;而在IE7及firefox下important級別優先,所以color:red !important;和color:blue;的前后順序沒有關系,在IE7及firefox下red跟blue誰先誰后都沒有關系。

看下一個例子。

例二:

CSS

#box div{
      color:red;
 }
.important_false{
      color:blue;
}
.important_true{
      color:blue !important;
}

HTML

<div id="Box">
     <div class="important_false">這一行末使用important</div>
     <div class="important_true">這一行使用了important</div>
</div>

     例二中,CSS代碼第一行設定了box里面所有div中字體色為紅色,第二行和第三行都用class重新定義了自身div的字體色為藍色,不同的是,第二行末使用important,而第三行使用了!

    默認情況下,class的優先級小於id,所以,第二行中即使用class重定義了自身樣式,也無法生效,所以繼承父級屬性,這行字還是紅色!

    但是,第三行中,用了important提升優先級(或看成強制重定義),所以這里的css得以生效,這行字變為了藍色!

2、

只有當同時出現兩個同名的樣式時,才可以這樣用,就像下面這樣的.

.myclass{
 margin-left
:20px!important;
 margin-left
:40px;

}

3、 后來我看到了!important這個屬性,這個屬性其實也是css規范中的,結果IE6愣是不支持,也正因為它不支持,才讓很多的CSSer們找到了解決的方法。一般來講,在css中,如果在同一個css塊中寫下兩個同樣的屬性,那么其實是按照最下面的來執行的,比如說: 

.home{ 
margin-left:20px; 
margin-left:40px; 
} 

  那么在執行的時候其實是按照40px來執行的,!important的出現就是為了讓用戶自己設置被執行語句的優先級。如果把上面的語句改為: 

.home{ 
margin-left:20px!important; 
margin-left:40px; 
} 

  那么在火狐、google瀏覽器以及IE7以上版本下將會按照20px來執行,而在IE6下卻仍然按照40px來執行,因為IE6並不支持!important規范,我們就可以按照這個規則來滿足IE6的設計需要,什么時候發現IE6和其他瀏覽器顯示效果不同,那么就設置兩個,在上面的一個加入!important標記,而下面的一句則不需要添加,這樣IE6就按照下面的來執行了。資深的CSSer說:如今的CSS處處!important。這可都是天殺的IE6惹的禍,大家說IE6就是一坨代謝產物一點也不為過。

4、

說明!important對火狐和IE7,8的作用是相同的,而IE6而顯出了特殊的結果

#test{background:("a.png") no-repeat!important;background:url(ie6.gif) no-repeat}

5、
  !important 具有優先權 

  提升指定樣式規則的應用優先權。 

  示例:div { color:red!important } 

  display:inline|block 

  display:inline比較經典的用法是用在 <ul> 下的 <li> 中 

  display:inline 對應不顯示為 display:none 

  display:block 對應不顯示為 hidden 

  說通俗點樣式為none的元素不占位置,而樣式為hidden的元素雖然不顯示但還是占地方 

  display:inline 

  它可以讓行內顯示為塊的元素,變為行內顯示,例如 

  <div class="d1"> 

  <div>DIV1</div> 

  <div>DIV2</div> 

  </div> 

  這里DIV1和DIV2分別占一行,但是你給他們加上屬性后變了,DIV1和DIV2這時候顯示在同一行了,試試看 

  <div class="d1"> 

  <div style="display:inline">DIV1</div> 

  <div style="display:inline">>DIV2</div> 

  </div> 

  現在DIV1和DIV2就在一行里了。 

  和 display:inline 對應的是 display:block,block 會讓應用了該 CSS 屬性的 HTML 標記變成塊級別元素,例如 SPAN 是行內顯示的,但是你加了 display:block 屬性就不一樣了 

  [font style= "display:block "] SPAN1 [/font] 

  [font style= "display:block "] SPAN2 [/font] 

  block一般一個塊占一行,除非float 

  inline是自動排為一行,就象段內的文字一樣,可成為多行。 

  clear:both 語法:clear :none | left |right | both 

  參數: 

  none : 允許兩邊都可以有浮動對象 

  both : 不允許有浮動對象 

  left : 不允許左邊有浮動對象 

  right : 不允許右邊有浮動對象 

  說明: 

  該屬性的值指出了不允許有浮動對象的邊。請參閱float屬性。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM