css !important用法以及CSS樣式使用優先級判斷
之前一直看到很多css中都有!important這個樣式，一直不知道有什麽作用的，今天在網上詳細了解了一下，看了別人的博客，順便轉載收藏一下
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屬性。
轉載地址：http://www.cnblogs.com/lykbk/archive/2012/08/09/huhu345545.html
css !important用法以及CSS樣式使用優先級判斷