利用important來(lái)改變CSS中優(yōu)先級(jí)順序的案例

發(fā)布時(shí)間：2020-08-29 14:21:07 來(lái)源：億速云閱讀：134 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下利用important來(lái)改變CSS中優(yōu)先級(jí)順序的案例，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

每個(gè)樣式表的優(yōu)先順序是在前面的頁(yè)面上記載的，在相同的樣式表中，同一元素的屬性設(shè)定多個(gè)值的情況下，會(huì)發(fā)生什么呢？

我們來(lái)看一個(gè)簡(jiǎn)單的例子。首先，創(chuàng)建目標(biāo)HTML語(yǔ)句

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
strong {
  color: #00ff00;
}
strong {
  color: #ff0000;//red
}
	</style>
</head>
<body>
<p>
啦啦啦啦<strong>億速云</strong>
噠噠噠噠噠<strong>php</strong>中文網(wǎng)
</p>
</body>
</html>

接下來(lái)我們來(lái)看一下！important的使用

如果要改變代碼中優(yōu)先級(jí)，則需要使用!important，使用方法如下。

選擇器{ 
  property（屬性）：value（值） ！Important ; 
  }

在描述樣式時(shí)，如果在值之后用空格再寫!important，則無(wú)論正常優(yōu)先級(jí)如何，都將優(yōu)先應(yīng)用該樣式。

下面我們來(lái)看一下具體的例子，將上述代碼中的CSS變成如下所示

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

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

我們接下來(lái)看看當(dāng)樣式表不同時(shí)！important的使用

樣式表的優(yōu)先級(jí)如下所示

（高優(yōu)先級(jí)）
樣式表在HTML文檔中描述
用戶樣式表由用戶查看
樣式表設(shè)置每個(gè)瀏覽器的默認(rèn)樣式表（低優(yōu)先級(jí)）

如果使用HTML文檔中描述的樣式表為同一元素的屬性再次設(shè)置在用戶樣式表中設(shè)置的樣式表，樣式表形式將生效。

那么如果在用戶樣式表設(shè)置中添加“！Important”會(huì)發(fā)生什么？在這種情況下，帶有“！Important”的樣式優(yōu)先。我們來(lái)具體看一下。

（高優(yōu)先級(jí)）
有！important的用戶的樣式表
有！important寫HTML文檔中的樣式表
寫在HTML文檔中的樣式表
用戶樣式表
默認(rèn)樣式表（低優(yōu)先級(jí)）

需要特別注意的是“帶有！important的用戶樣式表”比“帶有！important的HTML文檔描述的樣式表”具有更高的優(yōu)先級(jí)。因此，即使HTML文檔的創(chuàng)建者將樣式設(shè)置為“！Important”，如果在用戶樣式表中將新樣式值表設(shè)置為“！Important”，則用戶樣式表也會(huì)生效。

看完了這篇文章，相信你對(duì)利用important來(lái)改變CSS中優(yōu)先級(jí)順序的案例有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

利用important來(lái)改變CSS中優(yōu)先級(jí)順序的案例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽