CSS !important

admin發表於2018-10-30
CSSImport

人微言輕，不同身份的人受到的待遇是不同的。

同樣一句話，VIP人士口中說出，可能得到很好的貫徹，從普通人口中說出可能約等於pi。

在CSS中同樣如此，被標記為高權重的宣告會蓋過普通宣告。

!important就如同一個VIP標籤，被貼上此標籤CSS宣告將獲得高權重。

語法結構：

[CSS] 純文字檢視 複製程式碼
selector{declaration !important;}

引數解析：

（1）.selector：CSS選擇器。

（2）.declaration：CSS宣告。

程式碼片段演示如下：

[CSS] 純文字檢視 複製程式碼
#antzone{
  width:150px;
  height:100px;
  background-color:green!important;
}

程式碼分析如下：

（1）.background-color:green本條規則已經被貼上了"VIP"標籤。

（2）.此標籤是由一個歎號和important構成!important。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:150px;
  height:100px;
  background-color:green !important;
}
#antzone{
  background-color:blue;
}
</style> 
</head> 
<body> 
<div id="antzone"></div>
</body> 
</html>

通常情況下，CSS有如下兩個特點：

（1）.CSS後面的宣告會覆蓋前面的宣告。

（2）.高權重選擇器中的宣告要覆蓋低權重選擇器中宣告。

但是加上!important之後，就可以無視上面兩個規則，畢竟我是"VIP人士"。

所以上面程式碼中的div元素背景顏色將會呈現藍色，而不是綠色。

IE6相容性問題：

關於IE6相容性問題的介紹可能有點多此一舉，因為IE6瀏覽器幾乎已經銷聲匿跡。

有不少教程認為IE6不支援!important，這個結論是錯誤的。

IE6同樣支援此規則，但是有一點怪異現象，不過很容易解決。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.ant{color:red!important} 
.ant{color:blue;} 
</style> 
</head> 
<body> 
<div class="ant">螞蟻部落</div> 
</body> 
</html>

上述程式碼在IE6的表現完全沒有問題，div背景色會被設定為紅色，而不是藍色。

將程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.ant{
  color:red!important;
  color:blue;
} 
</style> 
</head> 
<body> 
<div class="ant">螞蟻部落</div> 
</body> 
</html>

IE6下，div會被設定為藍色，也就是說如果相同的宣告位於同一個程式碼塊中，VIP標籤也不管用。

將它們分開就沒有問題了，如果有IE6需要的朋友可以注意一下。

 !important使用原則：

  要謹慎使用 !important，因為它實在太強，權重太高。

一不小心就會影響到其他的樣式效果，使用原則如下：

（1）.不要在全域性使用此效果，而是要在小區域性覆蓋全域性或者外部引入樣式時使用。

（2）.不要在外掛中應用，它的權重太高，以免對頁面其他樣式產生影響，或者給使用者帶來不便。

（3）.不推薦使用 !important，推薦使用其他CSS優先順序方式解決問題。

相關文章