css的優(yōu)先級機(jī)制總結(jié)

css的優(yōu)先級機(jī)制總結(jié)

ID:8817316

大小:58.32 KB

頁數(shù):5頁

時間:2018-04-08

css的優(yōu)先級機(jī)制總結(jié)_第1頁
css的優(yōu)先級機(jī)制總結(jié)_第2頁
css的優(yōu)先級機(jī)制總結(jié)_第3頁
css的優(yōu)先級機(jī)制總結(jié)_第4頁
css的優(yōu)先級機(jī)制總結(jié)_第5頁
資源描述:

《css的優(yōu)先級機(jī)制總結(jié)》由會員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫。

1、樣式的優(yōu)先級  多重樣式(MultipleStyles):如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時應(yīng)用于同一個元素,就是使多重樣式的情況?! ∫话闱闆r下,優(yōu)先級如下:(外部樣式)Externalstylesheet<(內(nèi)部樣式)Internalstylesheet<(內(nèi)聯(lián)樣式)Inlinestyle?! ∮袀€例外的情況,就是如果外部樣式放在內(nèi)部樣式的后面,則外部樣式將覆蓋內(nèi)部樣式?! ∈纠缦拢?head>/*內(nèi)部樣式*/h3{color:green;}

2、tylesheet"type="text/css"href="style.css"/>

測試!

  選擇器的優(yōu)先權(quán):  解釋:  1.?內(nèi)聯(lián)樣式表的權(quán)值最高1000;  2.?ID選擇器的權(quán)值為100;  3.?Class類選擇器的權(quán)值為10;  4.?HTML標(biāo)簽選擇器的權(quán)值為1;  利用選擇器的權(quán)值進(jìn)行計(jì)算比較,示例如下:#redPp{/*權(quán)值=100+1=101*/color:#F00;/*紅色

3、*/}#redP.redem{/*權(quán)值=100+10+1=111*/color:#00F;/*藍(lán)色*/}#redPpspanem{/*權(quán)值=100+1+1+1=103*/color:#FF0;/*黃色*/}redemred

red

  結(jié)果:標(biāo)簽內(nèi)的數(shù)據(jù)顯示為藍(lán)色?! SS優(yōu)先級法則:  A.選擇器都有一個權(quán)值,權(quán)值越大越優(yōu)先;  B.當(dāng)權(quán)值相等時,后出現(xiàn)的樣式表

4、設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置;  C.創(chuàng)作者的規(guī)則高于瀏覽者:即網(wǎng)頁編寫者設(shè)置的CSS樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式;  D.繼承的CSS樣式不如后來指定的CSS樣式;  E.在同一組屬性設(shè)置中標(biāo)有“!important”規(guī)則的優(yōu)先級最大;  示例如下:#redPp{/*兩個color屬性在同一組*/color:#00f!important;/*優(yōu)先級最大*/color:#f00;}

color

color

5、

  結(jié)果:在Firefox下顯示為藍(lán)色;在IE?6下顯示為紅色;  使用腳本添加樣式  當(dāng)在連接外部樣式后,再在其后面使用JavaScript腳本插入內(nèi)部樣式時(即內(nèi)部樣式使用腳本創(chuàng)建),IE瀏覽器就表現(xiàn)出它的另類了。代碼如下:demo