這篇文章主要介紹“css如何強(qiáng)制增加優(yōu)先級(jí)”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“css如何強(qiáng)制增加優(yōu)先級(jí)”文章能幫助大家解決問(wèn)題。
創(chuàng)新互聯(lián)專(zhuān)業(yè)IDC數(shù)據(jù)服務(wù)器托管提供商,專(zhuān)業(yè)提供成都服務(wù)器托管,服務(wù)器租用,眉山服務(wù)器托管,眉山服務(wù)器托管,成都多線(xiàn)服務(wù)器托管等服務(wù)器托管服務(wù)。
在css中,可以通過(guò)設(shè)置“!important”聲明來(lái)強(qiáng)制增加優(yōu)先級(jí);該聲明用于提高指定CSS樣式規(guī)則的應(yīng)用優(yōu)先權(quán),會(huì)被添加到CSS樣式值的末尾以賦予該樣式更多權(quán)重,語(yǔ)法“選擇器{屬性:值 !important;}”。使用“!important”規(guī)則會(huì)打破樣式表的自然級(jí)聯(lián)效果,使得代碼難以維護(hù);因此除非絕對(duì)必要,應(yīng)盡可能避免使用!important規(guī)則,它應(yīng)只在特殊情況下使用。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中,可以通過(guò)設(shè)置“!important”聲明來(lái)強(qiáng)制增加優(yōu)先級(jí)。
!important聲明
!important用于提高指定CSS樣式規(guī)則的應(yīng)用優(yōu)先權(quán);它被添加到CSS值的末尾以賦予它更多權(quán)重。
選擇器{屬性:值 !important;}
注意:屬性:值 !important
屬性值用空格隔開(kāi)即可。
在CSS中,樣式規(guī)則以級(jí)聯(lián)方式應(yīng)用于元素。下面這個(gè)列表中越靠前的權(quán)重越?。?/p>
● 瀏覽器樣式:是Web瀏覽器聲明的默認(rèn)樣式。
● 用戶(hù)聲明的樣式:是用戶(hù)使用瀏覽器選項(xiàng)設(shè)置或通過(guò)開(kāi)發(fā)人員調(diào)試工具修改的自定義樣式。
● 開(kāi)發(fā)中聲明的樣式:是網(wǎng)站開(kāi)發(fā)人員在CSS樣式表中聲明的樣式。
● 具有!important規(guī)則的開(kāi)發(fā)者聲明樣式。
● 具有!important規(guī)則的用戶(hù)樣式。
!important為開(kāi)發(fā)者提供了一個(gè)增加樣式權(quán)重的方法,比直接在元素的 style 屬性中設(shè)置 CSS 聲明還要高, 一般用在 CSS 覆蓋 JavaScript設(shè)置上。
示例:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>測(cè)試!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代碼第一行設(shè)定了box里面所有div中字體色為紅色,第二行和第三行都用class重新定義了自身div的字體色為藍(lán)色,
不同的是,第二行未使用!important,而第三行使用了!
總結(jié):
第一行字體顏色是紅色,可以證明,css樣式設(shè)置中,id的優(yōu)先級(jí)大于class,這行字還是紅色。
第二行字體顏色是藍(lán)色,可以證明,!important的優(yōu)先級(jí)最高,important_true的css樣式生效,這行字變?yōu)榱怂{(lán)色!
什么時(shí)候用!important規(guī)則?
除非絕對(duì)必要,否則不應(yīng)使用!important規(guī)則;使用!important規(guī)則會(huì)打破了樣式表的自然級(jí)聯(lián)效果,使得代碼難以維護(hù)。但是,在某些情況下你必須使用!important:
1、在測(cè)試和調(diào)試網(wǎng)站時(shí),!important規(guī)則是非常有用的。
如果我們的代碼中存在一些CSS問(wèn)題,并且希望確保應(yīng)用特定的樣式,則可以使用!important規(guī)則在網(wǎng)站上臨時(shí)修復(fù)問(wèn)題,直到找到更好的方法(可能需要一些時(shí)間) 。
2、輸出樣式表
!important規(guī)則也可用于輸出樣式表,以確保應(yīng)用樣式而不被其他任何內(nèi)容覆蓋。
結(jié)論
使用!important對(duì)于性能并沒(méi)有什么負(fù)面影響;但是從可維護(hù)性角度考慮,除非絕對(duì)必要,應(yīng)盡可能的避免使用!important規(guī)則,它應(yīng)該只在特殊情況下使用。
以上就是本篇文章的全部?jī)?nèi)容,希望能對(duì)大家的學(xué)習(xí)有所幫助。更多精彩內(nèi)容大家可以關(guān)注創(chuàng)新互聯(lián)相關(guān)教程欄目?。?!
特別說(shuō)明:
!important
在IE6中是不被識(shí)別的,例:
.testClass{ color:blue !important; color:red; }
這種寫(xiě)法在IE6下是識(shí)別不到的,.testCalss最后顯示為紅色,但也可以通過(guò)更改下寫(xiě)法讓IE6識(shí)別到!important
.testClass{ color:blue !important; } .testClass{ color:red; }
關(guān)于“css如何強(qiáng)制增加優(yōu)先級(jí)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
文章題目:css如何強(qiáng)制增加優(yōu)先級(jí)
文章地址:http://jinyejixie.com/article20/ijcgjo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、服務(wù)器托管、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、、網(wǎng)站營(yíng)銷(xiāo)、外貿(mào)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)