CSS 中的 !important 屬性

時間 2019-12-12

標籤 css important 屬性欄目 CSS 简体版

原文原文鏈接

　　!important的做用就是提升指定樣式屬性的優先級。瀏覽器

　　通常狀況下，咱們對同一個元素設置樣式屬性的時候，對同一個屬性設置了兩個甚至多個值，像下面這樣：字體

1 p { /* 例1 */
2     color:red;
3     color:yellow;
4     color:blue;
5 }

　　這個時候就是後面聲明的屬性生效，字體顯示爲藍色。spa

　　假設咱們但願我還像上面這麼寫，但我但願最終生效字體顯示爲紅色，那咱們能夠給紅色設置!important：code

1 p { /* 例2 */
2     color:red !important;    /* 設置了優先級 */
3     color:yellow;
4     color:blue;
5 }

　　那這個時候字體就會顯示爲紅色。對象

　　若是有多個樣式屬性設置了!important，像下面這樣：blog

1 p { /* 例3 */
2     color:green !important;　　
3     color:red !important;
4     color:yellow !important;
5     color:blue;
6 }

　　那它仍是和沒設置時同樣，最後聲明的生效，也就是說上面這個例子最終生效的顏色是黃色。ci

　　咱們知道，CSS選擇器越具體，優先級越高，例如：get

 1 <head>
 2     <style>
 3         p.p1 { color:blue; }
 4         p { color:red; }
 5     </style>
 6 </head>
 7 
 8 <body>
 9     <p class="p1">p標籤</p>
10 </body>

　　最終這個<p>元素顯示爲藍色。it

　　若是咱們設置了!important給color:red;class

 1 <head>
 2     <style>
 3         p.p1 { color:blue; }
 4         p { color:red !important; }    /* 設置了優先級 */
 5     </style>
 6     
 7 </head>
 8 <body>
 9     <p class="p1">p標籤</p>
10 </body>

　　最終這個<p>元素顯示爲紅色。那若是這個<p>元素設置了內聯樣式呢？

1 <head>
2     <style>
3         p { color:red !important; }
4     </style>
5 </head>
6 <body>
7     <p class="p1" style="color:blue">p標籤</p>
8 </body>

　　最終這個<p>元素顯示爲紅色。也就是說聲明瞭!important的樣式屬性會覆蓋其它任何聲明。

在Internet Explorer中的 !important

　　但在IE 6及更早的版本中，不支持咱們這種寫法。像例3，在IE5（我用的是IE11而後再控制檯中切換到IE5的方式模擬的，IE11沒有模擬IE6，湊合湊合_(:з」∠)_）中運行效果是這樣的：

　　沒錯，最終它仍是顯示爲藍色，!important被忽略了。讓咱們換一種寫法：

1 p { color:blue; }
2 p { color:yellow; }
3 p { color:red !important; }/* 設置了優先級 */

　　這個時候就能夠顯示爲紅色了：

　　再看看這個例子：

1 p { color:blue; }
2 p { 
3     color:red !important;    /* 設置了優先級 */
4     color:yellow;
5 }

　　在模擬IE5的瀏覽器中運行效果以下：

　　我的理解：IE6及更早版本的IE瀏覽器中運行!important就比如說"你們都是針對這個元素設置的樣式，color樣式請優先使用我這個CSSRule對象（被{}包裹起來的一些樣式屬性）中的color樣式"，而不是說"就使用我指定的color樣式"。

參考資料：MDN - 優先級：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity　　

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。