首頁 > 文章 > web前端 > 如何使用！ important來改變CSS中優先權的順序

如何使用！ important來改變CSS中優先權的順序

不言原創: 2018-11-20 17:23:234073瀏覽

每個樣式表的優先順序是在前面的頁面上記載的，在相同的樣式表中，同一元素的屬性設定多個值的情況下，會發生什麼事？本篇文章就來跟大家分享如何使用！ important來改變CSS中優先權的順序。

我們來看一個簡單的例子。首先，建立目標HTML語句

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
strong {
  color: #00ff00;
}
strong {
  color: #ff0000;//red
}
	</style>
</head>
<body>
<p>
啦啦啦啦<strong>php中文网</strong>
哒哒哒哒哒<strong>php</strong>中文网
</p>
</body>
</html>

瀏覽器上效果顯示如下：strong元素中文字的顏色是紅色。

如何使用！ important來改變CSS中優先權的順序

接下來我們來看看！ important的使用

如果要改變程式碼中優先級，則需要使用!important，使用方法如下。

选择器{ 
  property（属性）：value（值） ！Important ; 
  }

在描述樣式時，如果在值之後用空格再寫!important，則無論正常優先權如何，都將優先套用該樣式。

下面我們來看一下具體的例子，將上述程式碼中的CSS變成如下所示

<style type="text/css">
strong { 
  color:#00ff00 !important; 
} 

strong { 
  color:#ff0000; 
} 
</style>

瀏覽器上顯示如下所示：strong元素中字體顏色變成了綠色，!important改變了樣式的優先權。

如何使用！ important來改變CSS中優先權的順序

我們接下來看看當樣式表不同時！ important的使用

樣式表的優先順序如下所示

（高優先權）
樣式表在HTML文件中說明
使用者樣式表由使用者檢視
樣式表設定每個瀏覽器的預設樣式表所描述的樣式表為相同元素的屬性再次設定在使用者樣式表中設定的樣式表，樣式表形式將生效。

那麼如果在使用者樣式表設定中新增「！Important」會發生什麼事？在這種情況下，帶有“！Important”的樣式優先。我們來具體看一下。

（高優先）

有！ important的使用者的樣式表

有！ important寫HTML文檔中的樣式表

寫在HTML文檔中的樣式表
用戶樣式表
默認樣式表（低優先級）

需要特別注意的是

「帶有！important的使用者樣式表」比「帶有！important的HTML文檔描述的樣式表」具有更高的優先權。因此，即使HTML文件的建立者將樣式設為“！Important”，如果在使用者樣式表中將新樣式值表設為“！Important”，則使用者樣式表也會生效。

以上是如何使用！ important來改變CSS中優先權的順序的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css3中的播放方式animation-timing-function屬性詳解下一篇：css3中的播放方式animation-timing-function屬性詳解

看更多