[精讚] [會員登入]
28290

CSS 的 !important 意義

網頁的前端工程師非常頭痛的事,就是同時要處理 IE和 FF等不同的瀏覽器,更糟的是 IE 又分成了 6 7 8三種版本,

此文完整連結 http://n.sfs.tw/10632

複製連結 CSS 的 !important 意義@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-25 13:42:15 最後編修
2017-01-17 00:17:11 By 張○○
 

自動目錄

網頁的前端工程師非常頭痛的事,就是同時要處理 IE和 FF等不同的瀏覽器,更糟的是 IE 又分成了 6  7 8 9 10 11 12 ....不同版本,同樣的 CSS在不同的browser或是同browser不同版本中,竟會差異天攘之別,這才是煩人。

好了,來說說 css 中 !important 的意義。

css 中 !important 的意義

有人是這樣寫的:

看得懂的browser  會處理 !important 的css,不看懂的browser  會忽略。IE一直都不支持這個語法,而其他的瀏覽器都支持。我們就可以利用這一點來分別給IE和其它瀏覽器不同的樣式定義。(x) 

!important 前面是給Firefox看的 (x)

其實上面的錯在於沒有把!important 意義搞清楚,先來看以下範例:

1. 都沒使用 !important,在這種情況下,第二個p會覆寫第一個p,所以是紅色。

#example p { color: blue; }

#example p { color: red; }

2. 一個使用 !important,因為第一個有!important,所以有更高的優先權,所以會是藍色

#example p { color: blue !important; }

#example p { color: red; }

3.  二個都使用 !important,同1,第二個p覆寫了第一個p,所以是紅色

#example p { color: blue !important; }

#example p { color: red !important; }

4.  利用 !important 覆寫 style,如下範例,所以是藍色

CSS:
#example p { color: blue !important; }

HTML:
<div id="example"> <p style="color:green;">This paragraph has an inline style</p> </div>

5.  利用 !important 強制鎖定型別,如下範例,所以是綠色

CSS:
#example p { color: blue !important; }

HTML:
<div id="example"> <p style="color:green !important;">This paragraph has an inline style</p> </div>

6. 以上基本上出現的結果會和我說的一樣,除了IE6 & 7以外,各版本的IE表現:

Internet Explorer 6 會採用最後一個宣告的屬性,根本不理會 !important,所以範例2 只有IE6,7會是紅色 ,所以我原本都誤會 !important 是程式語言的 NOT important 不重要的意思,事實上反而是相反的意思:

!important 是「更重要」的意思,對新的browser來說,是最高優先的意思;對不支援!important的browser 而言,會忽略無作用

IE7 必需要宣告 doctype 才會正常顯示。

IE8 就比較正常了。

其他說明

1. !important 是跟著每個屬性設定,所以要在屬性中:

   color: #123456 !important;   <== ○ 正確寫法指定覆寫
   color: #123456 ; !important;   <== x 錯誤寫法,覆寫不會生效

2. 類別中有多個屬性,每個屬性都要覆寫,就每個屬性值都要有 !important

 .classname { color:#123456; background:#987654 !important; }     <==  指定覆寫background,color 不受影響
 .classname { color:#123456 !important; background:#987654 !important; }     <==  指定覆寫background、color

3. 除非你很清楚知道你在覆寫什麼東西,不然少用!important,因為他有可能導致你查錯困難。

4. CSS的權重:

有!important的 element style(設定在tag中的style) >  有!important的css >  element style(設定在tag中的style) > css後寫的 > css先寫的

延伸閱讀

[CSS] 多個 class 的表示法和寫法@新精讚

[CSS] 背景 background@新精讚

參考資料

[1] [CSS]!important讓IE 與 Firefox 分別定義  http://www.minwt.com/?p=83

[2] Using !important with CSS http://www.electrictoolbox.com/using-important-css/


原文 2010-08-22 23:34:45

你可能感興趣的文章

網頁的標頭(head)搜尋引擎和FB最佳化 網頁的標頭(head)搜尋引擎和facebook最佳化

[CSS] 改變文字選擇的顏色(反選的顏色) 我們會用滑鼠選取一小段文字,可能是為了複製或是為了看他清楚點,這篇來改變他選擇時的背影色。

UTF-8 BOM (Byte Order Mark) 的問題 在 Michael Kaplan 那看到 Every character has a story #4: U+feff

[CSS] 將多張圖片合併,製作css spirte 網站中有很多的小圖,如果能把他們合併後再用CSS取用,就能大幅的提升網路效能。

[CSS] HTML 畫出粗外框表格的方法 (粗框表格) 在畫表格的時候,習慣上表格的外框要比內部的線條來得粗,不但比較美觀,而且看起來比較完整

[HTML] 影像地圖 使用HTML的MAP標籤製作影像地圖

[HTML] 讓表格整欄上色的方法 過去我們要讓表格整欄上色,都得用很不方便的方法:該儲存格設定一個類別,指定他的樣式,現在有更好的方法

[HTLM5] 表單number和range輸入類型 介紹HTML5和數字有關的輸入類型number/range 等類型

關閉瀏覽器表單的自動完成autocomplete 什麼是自動完成?就是當我們在網頁的輸入文字欄位中打入文字時,瀏覽器會把曾輸入過歷史記錄中找出來讓我們選擇。

表格如何選取一欄(選取一直行) 表格中要指選擇一列很容易,直接叫用的標籤即可,但是要選取一欄呢?

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

[HP DL380G7] 生效啟動第3,4片網卡/開啟或關閉內建的網卡 HP DL380G7 預設第3,4片網卡裝完系統後找不到,難道是壞了?要怎麼辦?

一個邏輯的錯誤刪了全部檔案的經驗 今天本來想做一件很簡單的事,但卻足足浪費我多一倍的時間,再加上刪掉我全部的檔案,原因只是因為我自己的邏輯錯誤。

外匯課程經驗 有天遇到某個朋友的正妹朋友,說她有個很棒的外匯投資課程,要我們去聽,只收場地費200大洋。她又說續效最差一個月也有1%,誰還在苦哈哈上班?

[PHP] 檢查IP是否在某個網段內 mtachcidr 要檢查IP是否在某個網段內,要寫幾行?10行?5行? 不用,只要2行。以下是我寫的 code /** * matchCI

[CodeIgniter 3] 資料庫的使用方法整理2/2 CI3 承襲 CI2,有很多的builder class可以用,依各人的使用習慣,有人喜歡一堆sql字串,有人喜歡用helper