您好,登錄后才能下訂單哦!
這篇文章主要介紹“css如何強制增加優先級”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“css如何強制增加優先級”文章能幫助大家解決問題。
在css中,可以通過設置“!important”聲明來強制增加優先級;該聲明用于提高指定CSS樣式規則的應用優先權,會被添加到CSS樣式值的末尾以賦予該樣式更多權重,語法“選擇器{屬性:值 !important;}”。使用“!important”規則會打破樣式表的自然級聯效果,使得代碼難以維護;因此除非絕對必要,應盡可能避免使用!important規則,它應只在特殊情況下使用。
本教程操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css中,可以通過設置“!important”聲明來強制增加優先級。
!important聲明
!important用于提高指定CSS樣式規則的應用優先權;它被添加到CSS值的末尾以賦予它更多權重。
選擇器{屬性:值 !important;}
注意:屬性:值 !important
屬性值用空格隔開即可。
在CSS中,樣式規則以級聯方式應用于元素。下面這個列表中越靠前的權重越小:
● 瀏覽器樣式:是Web瀏覽器聲明的默認樣式。
● 用戶聲明的樣式:是用戶使用瀏覽器選項設置或通過開發人員調試工具修改的自定義樣式。
● 開發中聲明的樣式:是網站開發人員在CSS樣式表中聲明的樣式。
● 具有!important規則的開發者聲明樣式。
● 具有!important規則的用戶樣式。
!important為開發者提供了一個增加樣式權重的方法,比直接在元素的 style 屬性中設置 CSS 聲明還要高, 一般用在 CSS 覆蓋 JavaScript設置上。
示例:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>測試!Important</title> </head> <style type="text/css"> #Box div { color: red; } .important_false { color: blue; } .important_true { color: blue !important; } </style> <body> <div id="Box"> <div class="important_false"> 這一行末使用important</div> <div class="important_true"> 這一行使用了important</div> </div> </body> </html>
效果圖:
CSS代碼第一行設定了box里面所有div中字體色為紅色,第二行和第三行都用class重新定義了自身div的字體色為藍色,
不同的是,第二行未使用!important,而第三行使用了!
總結:
第一行字體顏色是紅色,可以證明,css樣式設置中,id的優先級大于class,這行字還是紅色。
第二行字體顏色是藍色,可以證明,!important的優先級最高,important_true的css樣式生效,這行字變為了藍色!
什么時候用!important規則?
除非絕對必要,否則不應使用!important規則;使用!important規則會打破了樣式表的自然級聯效果,使得代碼難以維護。但是,在某些情況下你必須使用!important:
1、在測試和調試網站時,!important規則是非常有用的。
如果我們的代碼中存在一些CSS問題,并且希望確保應用特定的樣式,則可以使用!important規則在網站上臨時修復問題,直到找到更好的方法(可能需要一些時間) 。
2、輸出樣式表
!important規則也可用于輸出樣式表,以確保應用樣式而不被其他任何內容覆蓋。
結論
使用!important對于性能并沒有什么負面影響;但是從可維護性角度考慮,除非絕對必要,應盡可能的避免使用!important規則,它應該只在特殊情況下使用。
以上就是本篇文章的全部內容,希望能對大家的學習有所幫助。更多精彩內容大家可以關注億速云相關教程欄目!!!
特別說明:
!important
在IE6中是不被識別的,例:
.testClass{ color:blue !important; color:red; }
這種寫法在IE6下是識別不到的,.testCalss最后顯示為紅色,但也可以通過更改下寫法讓IE6識別到!important
.testClass{ color:blue !important; } .testClass{ color:red; }
關于“css如何強制增加優先級”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識,可以關注億速云行業資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。