同級(jí)情況下CSS的優(yōu)先級(jí)探討

2024-07-11 08:47:02

字體：大中小

供稿：網(wǎng)友

假如兩個(gè)或更多的規(guī)定在應(yīng)用了前三個(gè)規(guī)定具有相同優(yōu)先級(jí)，則后給出的規(guī)則優(yōu)先于早先給出的規(guī)則。如果在網(wǎng)頁(yè)的HEAD標(biāo)記中同時(shí)使用了STYLE標(biāo)記符（指定嵌入式樣式）和LINK標(biāo)記符（指定鏈接式樣式），并且這兩個(gè)樣式指定中同時(shí)應(yīng)用了具有同一優(yōu)先級(jí)別的樣式，則STYLE標(biāo)記符和LINK標(biāo)記符的先后順序?qū)Q定樣式的優(yōu)先級(jí)。例如，如果在LINK所鏈接的樣式表（mycss.css）中定義了以下一條樣式規(guī)則：

H1{color:red}同時(shí)在嵌入式樣式定義中也定義了一條規(guī)則：H1{color:yellow}在網(wǎng)頁(yè)中的樣式定義如下所示：<HEAD><LINK rel=stylesheet href="mycss.css" type="text/css"><STYLE></STYLE></HEAD>

由于STYLE標(biāo)記符中定義的樣式后出現(xiàn)，因此它具有更高的優(yōu)先級(jí)，所以網(wǎng)頁(yè)中H1標(biāo)記符的內(nèi)容將顯示為黃色（yellow)。同樣，如果將Link標(biāo)記符的位置移動(dòng)到<STYLE></STYLE>標(biāo)記符之后，則網(wǎng)頁(yè)中H1標(biāo)記符的內(nèi)容將顯示為紅色（red)。另外，由于直插式樣式（使用HTNL標(biāo)記的style屬性設(shè)置的樣式）的位置最接近于樣式作用的標(biāo)記符，因此它通常具有高優(yōu)先級(jí)。

@import導(dǎo)入式是在嵌入式里面插入的，但是在測(cè)試的過(guò)程中，卻是優(yōu)先級(jí)最低的，因此我認(rèn)為是瀏覽器加載完畢后導(dǎo)入樣式表時(shí)，優(yōu)先解析了導(dǎo)入的內(nèi)容，所以成為被后面同級(jí)樣式覆蓋。

在同級(jí)的情況下的優(yōu)先級(jí)是：行內(nèi)樣式>內(nèi)嵌式=link鏈接式（誰(shuí)順序后，誰(shuí)優(yōu)先級(jí)高）>@import導(dǎo)入式

上一篇：CSS強(qiáng)制按比例縮小圖片

下一篇：區(qū)別各種IE瀏覽器的css寫法