同級(jí)情況下CSS的優(yōu)先級(jí)探討
發(fā)布時(shí)間：2010-07-23 22:39:03 作者：佚名 
我要評(píng)論
我要評(píng)論CSS的調(diào)用方式一共有4種，分別是：行內(nèi)樣式，內(nèi)嵌式，link鏈接式，@import導(dǎo)入式，在同級(jí)的前提下，我們可以按樣就近原則來(lái)理解他們的優(yōu)先級(jí)，則越前定義的樣式，會(huì)被后面的樣式覆蓋。
假如兩個(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><!--H1{color:yellow}--></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)入式
H1{color:red}同時(shí)在嵌入式樣式定義中也定義了一條規(guī)則：H1{color:yellow}在網(wǎng)頁(yè)中的樣式定義如下所示：<HEAD><LINK rel=stylesheet href="mycss.css" type="text/css"><STYLE><!--H1{color:yellow}--></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)入式
相關(guān)文章
- 作為一個(gè)Web開(kāi)發(fā)者，掌握必要的前臺(tái)技術(shù)也是很重要的特別是CSS選擇器的優(yōu)先級(jí)問(wèn)題，為了廣大web愛(ài)好者可以更好的解決問(wèn)題，這里就CSS選擇器的優(yōu)先級(jí)問(wèn)題做了一些總結(jié)2013-08-01
CSS控制樣式的三種方式(優(yōu)先級(jí)對(duì)比驗(yàn)證)
大家都知道，CSS的中文名叫做層疊樣式表，而CSS在控制樣式的時(shí)候，有三種引入方式,這里簡(jiǎn)單介紹下CSS控制樣式的三種方式2013-07-22CSS優(yōu)先級(jí)的相關(guān)知識(shí)詳細(xì)介紹
所謂CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序，既然樣式有優(yōu)先級(jí)，那么就會(huì)有一個(gè)規(guī)則來(lái)約定這個(gè)優(yōu)先級(jí)，而這個(gè)“規(guī)則”就是本次所需要講的重點(diǎn)2013-04-22網(wǎng)頁(yè)css優(yōu)先級(jí)為您詳細(xì)解讀
所謂CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序，CSS是層疊樣式表（Cascading Style Sheets）的簡(jiǎn)稱，我們能通過(guò)CSS為文檔設(shè)置豐富且易于修改的外觀2013-04-19- css樣式優(yōu)先級(jí)是按照樣式表中出現(xiàn)順序還是按照元素中class或者id值的聲明順序呢，這個(gè)問(wèn)題貌似一直存在我們身邊卻一直無(wú)從選擇，接下來(lái)用實(shí)例為大家說(shuō)明下，到底哪個(gè)高點(diǎn)，2013-03-14
CSS層疊樣式表之CSS解析機(jī)制的優(yōu)先級(jí)及樣式覆蓋問(wèn)題探討
多重樣式（Multiple Styles）： 如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時(shí)應(yīng)用于同一個(gè)元素，就是使多重樣式的情況.有個(gè)例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則2013-02-01CSS優(yōu)先級(jí)和!important與IE6的BUG討論及解決方案
本來(lái)我對(duì)他誰(shuí)的ie6不支持!important也沒(méi)什么異議，可是正好在前幾天正好用個(gè)這個(gè)!important屬性解決了一個(gè)樣式優(yōu)先級(jí)的問(wèn)題，而且是支持ie6的，這是為什么呢？到底ie6支不2013-01-23IE6下CSS多類選擇符優(yōu)先級(jí)不起作用的bug分析及解決方法
IE6，這個(gè)前端開(kāi)發(fā)的夢(mèng)魘總是在你不經(jīng)意的時(shí)候給你捅一刀,在ie6環(huán)境下CSS多類選擇符優(yōu)先級(jí)不起作用，多么的令人氣憤啊，經(jīng)過(guò)測(cè)試：IE6下這種類組合的優(yōu)先級(jí)不如單個(gè)類， 感2013-01-23- css樣式的優(yōu)先級(jí)是一個(gè)龐雜的知識(shí)點(diǎn)，我甚至覺(jué)得它的龐雜可以與“浮動(dòng)”以及“框模型”相提并論,今天就利用點(diǎn)時(shí)間把我所了解的寫下來(lái)，大家共同進(jìn)步2013-01-11
- css基礎(chǔ)選擇器有標(biāo)簽選擇器、類選擇器、id選擇器、通用選擇器,本文將深入介紹css選擇器優(yōu)先級(jí),這會(huì)給正在解決優(yōu)先級(jí)問(wèn)題的朋友，帶來(lái)些許幫助2012-12-04