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

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

ID：8804591

大?。?5.13 KB

頁數(shù)：7頁

時間：2018-04-08

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

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

1、樣式的優(yōu)先級多重樣式（MultipleStyles）：如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時應(yīng)用于同一個元素，就是使多重樣式的情況。一般情況下，優(yōu)先級如下：（外部樣式）Externalstylesheet<（內(nèi)部樣式）Internalstylesheet<（內(nèi)聯(lián)樣式）Inlinestyle?有個例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則外部樣式將覆蓋內(nèi)部樣式。示例如下：??????????/*?內(nèi)部樣式?*/??????h3{color:green;}?????????

2、-?外部樣式?style.css?-->????????????

測試！

?選擇器的優(yōu)先權(quán)??解釋：1.?內(nèi)聯(lián)樣式表的權(quán)值最高1000；2.?ID選擇器的權(quán)值為1003.?Class類選擇器的權(quán)值為104.?HTML標(biāo)簽選擇器的權(quán)值為1?利用選擇器的權(quán)值進行計算比較，示例如下：??????

3、"text/css">????????#redP?p?{?????????????/*?權(quán)值?=?100+1=101?*/?????????????color:#F00;??/*?紅色?*/????????}?????????#redP?.red?em?{?????????????/*?權(quán)值?=?100+10+1=111?*/?????????????color:#00F;?/*?藍色?*/?????????}?????????#redP?p?span?em?{?????????????/*?權(quán)值?=?100+1+1+1=103?*/?????????

4、????color:#FF0;/*黃色*/????????}?????????????????????red???????????em?red????????

????????

red

?????
??結(jié)果：?標(biāo)簽內(nèi)的數(shù)據(jù)顯示為藍色。?CSS?優(yōu)先級法則：A?選擇器都有一個權(quán)值，權(quán)值越大越優(yōu)先；B?當(dāng)權(quán)值相等時，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式

5、表設(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)先級最大；示例如下：???????????#redP?p{????????/*兩個color屬性在同一組*/????????color:#00f?!important;?/*?優(yōu)先級最大?*/????????color:#f00;?????}??????

6、dy>????????????

color

???????

color

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