css樣式的優(yōu)先級

2020/11/9 9:10:14 閱讀：10615 發(fā)布者：10615

多重樣式（Multiple Styles）：如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時(shí)應(yīng)用于同一個(gè)元素，就是使多重樣式的情況。

一般情況下，優(yōu)先級如下：

（外部樣式）External style sheet <（內(nèi)部樣式）Internal style sheet <（內(nèi)聯(lián)樣式）Inline style

<style type="text/css">
/* 內(nèi)部樣式 */
h3{color:green;}
</style>


<link rel="stylesheet" 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

<style type="text/css">
#redP p {
/* 權(quán)值 = 100+1=101 */
color:#F00; /* 紅色 */
}

#redP .red em {
/* 權(quán)值 = 100+10+1=111 */
color:#00F; /* 藍(lán)色 */

}

#redP p span em {
/* 權(quán)值 = 100+1+1+1=103 */
color:#FF0;/*黃色*/
}
</style>

標(biāo)簽內(nèi)的數(shù)據(jù)顯示為藍(lán)色。

CSS 優(yōu)先級法則：

A 選擇器都有一個(gè)權(quán)值，權(quán)值越大越優(yōu)先；

B 當(dāng)權(quán)值相等時(shí)，后出現(xiàn)的樣式表設(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)先級最大；

IE 瀏覽器下載或者渲染的順序可能如下：

● IE 下載的順序是從上到下；

● JavaScript 函數(shù)的執(zhí)行會(huì)阻塞IE 的下載；

● IE 渲染的順序也是從上到下；

● IE 的下載和渲染是同時(shí)進(jìn)行的；

● 在渲染到頁面的某一部分時(shí)，其上面的所有部分都已經(jīng)下載完成（但并不是說所有相關(guān)聯(lián)的元素都已經(jīng)下載完。）

● 在下載過程中，如果遇到某一標(biāo)簽是嵌入文件，并且文件是具有語義解釋性的（例如：JS腳本，CSS樣式），那么此時(shí)IE的下載過程會(huì)啟用單獨(dú)連接進(jìn)行下載。并且在下載后進(jìn)行解析，如果JS、CSS中如有重定義，后面定義的函數(shù)將覆蓋前面定義的函數(shù)。

● 解析過程中，停止頁面所有往下元素的下載。樣式表文件比較特殊，在其下載完成后，將和以前下載的所有樣式表一起進(jìn)行解析，解析完成后，將對此前所有元素（含以前已經(jīng)渲染的）重新進(jìn)行樣式渲染。并以此方式一直渲染下去，直到整個(gè)頁面渲染完成。

● Firefox 處理下載和渲染的順序大體相同，只是在細(xì)微之處有些差別，例如：iframe 的渲染。

上一篇引入CSS的方法

下一篇 setTimeout() 引發(fā)的新認(rèn)識(shí)

【微信掃一掃】

css樣式的優(yōu)先級

文章分類

相關(guān)新聞

熱門標(biāo)簽