css !important用法以及CSS樣式使用優先級判斷- IT閱讀

css !important用法以及CSS樣式使用優先級判斷. 2018-09-04 254. 我們line href 重新定義float 找到火狐相同優先. 之前一直看到很多css中都有!important這個樣式，一直 ... css!important用法以及CSS樣式使用優先級判斷 首頁 最新 HTML CSS JavaScript jQuery Python3 Python2 Java C C++ Go SQL 首頁 最新 Search css!important用法以及CSS樣式使用優先級判斷 2018-09-04254 我們linehref重新定義float找到火狐相同優先之前一直看到很多css中都有!important這個樣式，一直不知道有什麽作用的，今天在網上詳細了解了一下，看了別人的博客，順便轉載收藏一下 css!important用法CSS樣式使用優先級判斷 例一： CSS #box{color:red!important;color:blue;} HTML 在不同的瀏覽器下，這行字的色應該不同！ 這個例子應該是大家經常見到的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 #boxdiv{color:red;}.important_false{color:blue;}.important_true{color:blue!important;} HTML 這一行末使用important這一行使用了important 例二中，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比較經典的用法是用在

下的
• 中　　display:inline對應不顯示為display:none　　display:block對應不顯示為hidden　　說通俗點樣式為none的元素不占位置,而樣式為hidden的元素雖然不顯示但還是占地方　　display:inline　　它可以讓行內顯示為塊的元素，變為行內顯示，例如　　　　
  DIV1
  　　
  DIV2
  　　　　這裏DIV1和DIV2分別占一行，但是你給他們加上屬性後變了,DIV1和DIV2這時候顯示在同一行了，試試看　　　　DIV1　　>DIV2　　　　現在DIV1和DIV2就在一行裏了。
  
  　　和display:inline對應的是display:block，block會讓應用了該CSS屬性的HTML標記變成塊級別元素，例如SPAN是行內顯示的，但是你加了display:block屬性就不一樣了　　[fontstyle="display:block"]SPAN1[/font]　　[fontstyle="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.htmlcss!important用法以及CSS樣式使用優先級判斷 相關文章 css!important用法以及CSS樣式使用優先級判斷 asp.net中gridview匯出excel方法以及怎樣修改匯出的日期格式 【OpenCV】查詢表用法以及LUT函式的使用 【轉載】6款漂亮HTMLCSS樣式使用者留言表單 HBase客戶端Shell語法以及JavaAPI的使用 JAVA中Object類中的方法以及finalize函式作用 js數組遍歷的常用的幾種方法以及差異和性能優化 android的無標題dialog以及dialog樣式的窗體 三種快速排序演算法以及快速排序的優化 PHP中的檔案載入和常量的語法以及指令式寫法。
  
  CSS樣式解決英文換行斷詞問題 CSS中樣式覆蓋優先順序 經典Top-K問題最優解決辦法以及C++程式碼實現 【轉】三種快速排序演算法以及快速排序的優化 css中樣式style的優先順序 分類導航 HTML/CSS HTML教程 HTML5教程 CSS教程 CSS3教程 JavaScript JavaScript教程 jQuery教程 Node.js教程 服務端 Python教程 Python3教程 Linux教程 Docker教程 Ruby教程 Java教程 JSP教程 C教程 C++教程 Perl教程 Go教程 PHP教程 正則表達式 資料庫 SQL教程 MySQL教程 PostgreSQL教程 SQLite教程 MongoDB教程 Redis教程 Memcached教程 行動端 IOS教程 Swift教程 Advertisement 三度辭典 Copyright©2016-2021IT閱讀  Itread01.comAllRightsReserved. 0.001291036605835