CSS：!important使用程式碼分享-css教學-PHP中文網

CSS：!important使用程式碼分享

黄舟

發布： 2017-07-27 11:11:34

原創

1994 人瀏覽過

這篇文章使用最新的IE10以及firefox與chrome測試（截止2013年5月27日22:23:22）

CSS的原理：

我們知道，CSS寫在不同的地方有不同的優先級， .css檔案中的定義< 元素style中的屬性，但是如果使用!important，事情就會變得不一樣。

首先，先看下面一段程式碼：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试Css中的!Important区别</title> 
</head> 
<style type="text/css">.testClass{ 
color:blue !important;
}</style><body>
    <p class="testClass" style="color:red;">
        测试Css中的Important    </p></body></html>

登入後複製

雖然元素的style中有testClass類別的定義，但在上面的css定義中的用!important限定的定義卻是優先順序最高的，無論是在ie6-10或Firefox和Chrome表現都是一致的，都顯示藍色。

這種情況也同時可以說明ie6是可以辨識!important的，只是這個是ie6的一個缺陷吧。如果寫成下面的樣式，ie6是識別不出來的：

.testClass{ 
color:blue !important;
color:red;
}

登入後複製

這樣，在ie6下展示的時候會顯示成紅色。

當然，也可以透過以下方式讓ie6辨識：

.testClass{ 
  
color:blue !important;  
}  
.testClass{ 

  
color:red;  
}

登入後複製

透過以上方式也是可以讓ie6顯示成藍色的。

以上是CSS：!important使用程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

CSS：!important使用程式碼分享