小編給大家分享一下css如何設(shè)置權(quán)重,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)是專業(yè)的稷山網(wǎng)站建設(shè)公司,稷山接單;提供網(wǎng)站建設(shè)、網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行稷山網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
在css中,可以使用“!important”語句來設(shè)置權(quán)重,該語句為開發(fā)者提供了一個增加樣式權(quán)重的方法;語法格式“屬性:屬性值 !important;”?!?important”語句是對整條樣式的聲明,包括這個樣式的屬性和屬性值。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
CSS權(quán)重
是指樣式的優(yōu)先級,有兩條或多條樣式作用于一個元素,權(quán)重高的那條樣式對元素起作用,權(quán)重相同的,后寫的樣式會覆蓋前面寫的樣式。
權(quán)重的等級
(1)!important,加在樣式屬性值后,權(quán)重值為10000
(2)內(nèi)聯(lián)樣式,如:style=“”,權(quán)重值為1000
(3)ID選擇器,如:#content,權(quán)重值為100
(4)類,偽類和屬性選擇器,如:content、:hover權(quán)重值為10
(5)標(biāo)簽選擇器和偽元素選擇器,如:div,p,:before權(quán)重值為1
(6)通用選擇器( * ) 、子選擇器(>)、相鄰選擇器(+)、同胞選擇器(~)、權(quán)重值為0
css怎么設(shè)置權(quán)重?
在css中,可以使用“!important”語句來設(shè)置權(quán)重,該語句為開發(fā)者提供了一個增加樣式權(quán)重的方法。
css權(quán)重值(重疊性)實例
css中有很多選擇器,那在多個選擇器都作用于同一個元素的情況下會出現(xiàn)什么效果呢? 代碼
猜猜我是什么顏色
執(zhí)行可結(jié)果
小結(jié) : 出現(xiàn)這種效果是因為瀏覽器是根據(jù)權(quán)重值來判斷使用哪種css樣式的,權(quán)重值高的它的優(yōu)先級會越高,就會呈現(xiàn)那種css樣式,id選擇器的權(quán)重值為100>類選擇器10>標(biāo)簽選擇器1,所以最終結(jié)果為id選擇器設(shè)置的樣式
示列二 代碼
!DOCTYPE html>猜猜我是什么顏色
執(zhí)行結(jié)果
小結(jié) : 繼承元素是沒有權(quán)重值的,所以最終結(jié)果為通用選擇器設(shè)置的樣式
實例三 代碼
猜猜我是什么顏色
執(zhí)行結(jié)果
小結(jié) : 標(biāo)簽選擇器的權(quán)重值是1,但是仍然大于通用選擇器,所以最終結(jié)果為標(biāo)簽選擇器設(shè)置的樣式
實例四 代碼
猜猜我是什么顏色
執(zhí)行結(jié)果
實例五 代碼
猜猜我是什么顏色
執(zhí)行結(jié)果
!important 提升權(quán)重值實例
我們在做網(wǎng)頁代碼時,有些特殊的情況需要為某些樣式設(shè)置具有最高權(quán)重值,怎么辦?比如我們知道內(nèi)聯(lián)樣式的權(quán)重值是1000,比較大,那么我們可以使用!important來解決。
!important的使用 猜猜我是什么顏色
執(zhí)行結(jié)果
什么情況下可以使用!important ?
第一種
你的網(wǎng)站上有一個設(shè)計了全站樣式的css文件
同時你或者你的小伙伴寫了一些很差的內(nèi)聯(lián)樣式
第二種
box p { color: blue; } p.awesome { color: red; }
怎樣才能使得文本的顏色變?yōu)榧t色?這種情況下,如果不適用!important.第一條規(guī)則永遠大于第二條的規(guī)則。
總結(jié)
以上是“css如何設(shè)置權(quán)重”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!