CSS標(biāo)簽選擇器優(yōu)先級(jí)

1、CSS優(yōu)先級(jí)的四大原則原則一：繼承不如指定如果某樣式是繼承來(lái)的永遠(yuǎn)不如具體指定的優(yōu)先級(jí)高。例子1：CODE:vspanclass=class3我是多大字號(hào)？v/span運(yùn)行結(jié)果：.class3font-size:12px;例子2：CODE:我是多大字號(hào)？運(yùn)行結(jié)果：.class3font-size:12px;注意：后面的幾大原則都是建立在“指定”的基礎(chǔ)上的。原則二：#ID.class標(biāo)簽選擇符例子：CODE:vspanid=id3class=class3我是多大字號(hào)？v/span運(yùn)行結(jié)果：#id3font-size:25px;原則三：包含越具體越強(qiáng)大。解釋?zhuān)寒?dāng)對(duì)某個(gè)元素的CSS選擇符樣式定義的越

2、具體，層級(jí)越明確，該定義的優(yōu)先級(jí)就越高。CODE:vspanclass=class3我是多大字號(hào)？v/spanv/p運(yùn)行結(jié)果：.classl.class2.class3font-size:25px;原則四：標(biāo)簽#id#id;標(biāo)簽.class.class上面這條原則大家應(yīng)該也都知道，看例子CODE:我是多大字號(hào)？spanclass=class3:我是多大字號(hào)？運(yùn)行結(jié)果：span#id3font-size:l8px|span.class3font-size:l8px很多人會(huì)有這樣的疑問(wèn)，為什么不把這個(gè)原則四歸入原則一形成：【標(biāo)簽#ID#ID標(biāo)簽.class.class標(biāo)簽選擇符通配符】呢？或者將“

3、標(biāo)簽.class”看作多更為具體的“.class”從而歸入原則二呢？后面我將解答各位的疑惑，這就涉及到CSS的解析規(guī)律這四大原則間也是有優(yōu)先級(jí)的，是不是有些糊涂了？別急，繼續(xù)看。四大原則的權(quán)重相信很多人都知道上面的四大原則，不要以為知道了這四大原則就能分辨css中那條代碼是起作用的，不信？那你5秒內(nèi)能肯定的知道下面這段代碼，測(cè)試中的文字的字號(hào)嗎？CODE:vspanid=id3class=class3我是多大字號(hào)？v/spanv/p為了大家方便閱讀，我去掉了一些代碼。四大原則的權(quán)重就是:原則一原則二原則三原則四解釋?zhuān)菏紫茸裱瓌t一有指定開(kāi)始使用下面的原則，無(wú)指定則繼承離他最近的定義。然后開(kāi)始原

4、則二1、比較最高優(yōu)先級(jí)的選擇符例子：CODE:vspanid=id3class=class3我是多大字號(hào)？v/spanv/p運(yùn)行結(jié)果：#id3font-size:18px刪掉上面CSS中的前兩行可以得出，如果沒(méi)有最高級(jí)別的#ID會(huì)尋找.class即使后面的CSS按照“原則二”描述的再具體也無(wú)法突破原則一。2、如果兩條CSS的如果最高選擇符優(yōu)先級(jí)一樣，則比較他們的數(shù)量例子：CODE:我是多大字號(hào)？運(yùn)行結(jié)果:.classl.class2#id3font-size:14px3、如果最高選擇符級(jí)別和數(shù)量都一樣，則按照原則二比較他們下一級(jí)，以此類(lèi)推。例子1：CODE:我是多大字號(hào)？運(yùn)行結(jié)果:#id1.c

5、lass2.class3font-size:14px*最高級(jí)選擇符的位置沒(méi)有高下之分，論證：CODE:我是多大字號(hào)？v/px/div上例中更換3條CSS的先后可以得出，哪條位于最后，哪條起作用。說(shuō)明他們的級(jí)別一樣，后面的將覆蓋前面的。*將原則四歸入原則二的不合理性，論證：CODE:vstyletype=text/cssv!-.class1span#id3font-size:14px#id1.class2.class3font-size:12px-v/stylevdivid=id1class=class1xpid=id2class=class2我是多大字號(hào)？#id1.class2.class3f

6、ont-size:12px可以看到span#id3并不比#id1高出一個(gè)級(jí)別。無(wú)結(jié)果開(kāi)始原則三如果比較結(jié)果，選擇符從最高級(jí)開(kāi)始都對(duì)應(yīng)，級(jí)別上的數(shù)量也相同，則開(kāi)始比較誰(shuí)更具體。例子：CODE：vstyletype=text/cssx!-#id1.class2spanfont-size:14px.class1#id3font-size:12px-vspanid=id3class=class3我是多大字號(hào)？v/spanv/px/div#idl.class2spanfont-size:14px當(dāng)然也可以理解為在原則二層層比較中“少一個(gè)層級(jí)的樣式”，缺少的那個(gè)層級(jí)沒(méi)有“層級(jí)較多的樣式”多出的那個(gè)層級(jí)的級(jí)別高。（繞口令）*將原則四歸入原則三的不合理性，論證：CODE：vstyletype=text/css我是多大字號(hào)？v/px/div上例中可以看出，如果將原則四并入原則三，將span.class3看作兩層，那么應(yīng)該和.class2.class3層級(jí)