CSS的!important修改權重


!important語法和描述

!important為開發者提供了一個增加樣式權重的方法。應當注意的是!important是對整條樣式的聲明,包括這個樣式的屬性和屬性值。

#example {
  font-size: 14px !important;    
}

#container #example {
  font-size: 10px;
}    

實例說明:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .div1 {
        color: red !important;
        /*color: red;*/
    }
    
    #div1 {
        color: blue;
        font-weight: bold;
    }
    </style>
</head>

<body>
    <div class="div1" id='div1' style='color:green;'>
        <p>div1內容</p>
        <span>span中的內容</span>
    </div>
</body>

</html>
View Code

實例總結:

1.!important會修改當前對應元素的當前css屬性和值得權重

2.!important指定的屬性權重比class選擇器,ID選擇器,內聯樣式的權重都高。

3.!important只對當前元素當前屬性權重有影響,對子元素權重沒影響

4.如果在在不懂選擇器中,相同屬性和值都指定了!important,選擇器權重高的屬性起作用

例如:

    .div1 {
        color: red !important;
    }
    
    #div1 {
        color: blue !important;
    }

瀏覽器解析結果,div中顏色為藍色。

關於!important應該注意的一些地方:

  1.  當!important第一次在CSS1中被介紹時是這樣規定的,即一個由開發者聲明的!important樣式要比一個由用戶聲明的!important樣式獲得更大的權重。為了提高訪問性,在CSS2 中它被顛倒了過來。
  2.  如果!important被用於一個簡寫的樣式屬性,那么這條簡寫的樣式屬性所代表的子屬性都會被作用上!important。
  3.  關鍵字!important必須放在一行樣式的末尾並且要放在該行分號前,否則就沒有效果。 (不過分號前的空格不會影響它)
  4.  如果因為一些特殊原因,你不得不在一個代碼塊中聲明兩個同樣的屬性,那么請把!important加在第一個屬性后面,因為這樣做會讓所有瀏覽器中第一個屬性的權重更大,而IE6除外(這是一個只有IE6才有的hack,但是不會影響你的CSS)

永不使用

非到萬不得已不要用!important。如果你是出於懶惰使用!important,為了避免例行的調試而濫用它,那么你(或者是那些后繼開發你項目的人)將會深受其害。

如果你並非濫用只是有偶爾用一下!important,同樣,你很快就會發現你的樣式會難以維護。正如上面我們討論過的,本來,CSS會根據層疊和權重產生正常的作用順序。但當你使用了!important就擾亂了原本的順序,讓更多的權重給了正常情況下本不應該獲得這么多權重的樣式。

如果你從不使用!important,那么這標志着你真正理解了CSS並且證明你在編寫代碼前經過深思熟慮。

正如古老的格言所說“永遠不要說‘永不’”,所以接下來我們還是要來討論!important的一些合理的用法。

幫助測試可訪問性

正如前面提到過的,用戶樣式中可以包含!important聲明,允許用戶根據自己的特殊需求來給具體的CSS樣式增加權重以幫助他們閱讀和訪問內容。

有特殊需求的用戶可以把!important加到像font-size這樣的打印屬性上來加大字體,或者為了提高網頁的對比度而把它加到與顏色相關的樣式上。

暫時解決緊急問題

總會有這樣的情況發生——某個客戶的線上網站出現了CSS的bug,你必須快速修復。在大多數情況下你應該會用Firebug或者其他的開發者工具來調試你的CSS代碼並且最終修復它。但是,如果這個bug發生在IE6或者是其他沒有提供調試工具的瀏覽器上的時候,你可能需要使用!important來完成快速修復。

當你用這個臨時修復的辦法讓網站繼續上線以后(這樣可以先擺平客戶),你再花些時間用不破壞層疊且可維護性高的方法來修復這個bug也為時未晚。當你找到更好的解決方案你就可以替換掉線上的!important部分,而且客戶對此毫不知情。

覆寫用戶生成內容中的行內樣式

CSS開發中一個讓人頭疼的問題,就是當我們遇到用戶生成內容中有行內樣式的情況,這種情況多發生在一些使用了所見即所得網頁編輯器的CMS系統中。在CSS層疊中,行內樣式會覆蓋常規樣式。然而,我們並不想看到那些本該被我們定義好的CSS樣式作用的元素卻被用戶生成內容中的行內樣式改變。此時你就可以用!important來避免這種問題,因為,一條被開發者加了!important的樣式會覆蓋行內樣式。

關於單獨設計的博客頁面

如果你曾經接觸過設計個人博客頁面的技術(許多設計師反對將 “藝術指導”用於這種技術,確實如此),像Heart Directed中展示的那樣,你會發現有一種需求要求每個單獨的文章都要有它自己獨立的樣式,抑或你需要使用行內樣式。你可以用這篇文章中給出的代碼為一個個人頁面編寫它自己的樣式。

!important在這個時候可以派上用場,為了在你的站點里創建一個獨一無二的頁面,你可以輕松覆蓋默認的樣式而不必擔心原本的CSS權重。

總結

如果你遇到了特殊的需求,或者你想覆蓋用戶代理(譯注:即瀏覽器)和開發者的默認樣式,提高頁面可訪問性,你最好慎重使用!important。你要對你的CSS在考慮周全的同時盡可能地避免使用!important。甚至在上面提到的許多能用到!important的地方它也不總是必要的。

盡管如此,!important在CSS中還是有用的。如果你接手一個項目,而這個項目之前的開發人員正好使用了!important,那么你在修復一些問題的時候我們今天所討論的將會派上用場。

 

博文部分內容來自:http://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html


免責聲明!

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



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