每個樣式表的優先順序是在前面的頁面上記載的,在相同的樣式表中,同一元素的屬性設定多個值的情況下,會發生什麼事?本篇文章就來跟大家分享如何使用! 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的使用
如果要改變程式碼中優先級,則需要使用!important,使用方法如下。
选择器{ property(属性):value(值) !Important ; }
在描述樣式時,如果在值之後用空格再寫!important,則無論正常優先權如何,都將優先套用該樣式。
下面我們來看一下具體的例子,將上述程式碼中的CSS變成如下所示
<style type="text/css"> strong { color:#00ff00 !important; } strong { color:#ff0000; } </style>
瀏覽器上顯示如下所示:strong元素中字體顏色變成了綠色,!important改變了樣式的優先權。
我們接下來看看當樣式表不同時! important的使用
樣式表的優先順序如下所示
(高優先權)
樣式表在HTML文件中說明
使用者樣式表由使用者檢視
樣式表設定每個瀏覽器的預設樣式表 所描述的樣式表為相同元素的屬性再次設定在使用者樣式表中設定的樣式表,樣式表形式將生效。
有! important的使用者的樣式表
有! important寫HTML文檔中的樣式表 寫在HTML文檔中的樣式表
用戶樣式表
默認樣式表 (低優先級)
需要特別注意的是
以上是如何使用! important來改變CSS中優先權的順序的詳細內容。更多資訊請關注PHP中文網其他相關文章!