昨晚在看一道面試題，發(fā)現(xiàn)有一部分人對(duì)css樣式的優(yōu)先級(jí)不是特別清楚，加之之前自己也一直在總結(jié)這個(gè)知識(shí)點(diǎn)，今天就利用點(diǎn)時(shí)間把我所了解的寫下來，大家共同進(jìn)步...
css樣式的優(yōu)先級(jí)是一個(gè)龐雜的知識(shí)點(diǎn)，我甚至覺得它的龐雜可以與“浮動(dòng)”以及“框模型”相提并論。對(duì)于本文，我思考了許久，或許可以用這么一句順口溜來總結(jié)，即“一載二位三重要四特殊”。下面具體展開：

一、“載”
這里的“載”，是載體，即樣式表。對(duì)于開發(fā)人員來說，經(jīng)常涉及到的只是“載”之一，除此之外，還有兩個(gè)。它們是什么呢？具體如下：
1、用戶端樣式表：這是瀏覽器默認(rèn)的樣式表，在遵守其規(guī)則的情況下，才有了div的原始屬性是“display:block”，span是“display:inline”。
2、用戶樣式表：即使用瀏覽器的人定義的樣式表。也許你不能理解，但是事實(shí)是你可以做到，具體設(shè)置方法，我以firefox為例，步驟如下：（1）菜單欄 “幫助”-->疑難排解信息-->應(yīng)用基礎(chǔ)-->打開所在文件夾-->chrome；（2）創(chuàng)建一個(gè)名為 userContent.css 的 CSS 文件，編輯加入所需要的樣式，保存。注意名字必須叫 userContent.css，不能更改。否則無效；（3）重啟firefox。我以w3cfuns首頁“熱門討論”為例，對(duì)其樣式進(jìn)行了設(shè)置，呈現(xiàn)的 結(jié)果如下：

而原本的效果如下：

通過上述方面，我們是可以來自動(dòng)地改變網(wǎng)站的呈現(xiàn)方式的。
3、作者樣式表：這個(gè)就是我們最熟悉的了，就是開發(fā)人員所書寫的樣式表。而我們經(jīng)常所說的樣式表，其實(shí)就停留在這個(gè)層面上，因?yàn)樗c我們最親密！

二、“位”
之所以把“位”放在第二點(diǎn)來說，有如下的考慮：（1）“位”指代兩點(diǎn)：樣式聲明的位置和樣式表鏈接的位置；（2）不管是樣式聲明的位置或者樣式表鏈接的位置，都是具體到對(duì)開發(fā)人員來說的，也就是“載”中的第3點(diǎn)，因此必須先說清“載”。

說清了理由，下面具體到“位”，就如理由中的第一點(diǎn)，我將從兩點(diǎn)展開：
1、樣式聲明的位置：樣式的聲明一搬來說有四種方式，除去@import和另外一種（幾乎沒用過，以至于忘了名稱了），目前常見的就兩種：行內(nèi)式和外聯(lián) 式，行內(nèi)用style標(biāo)簽，外聯(lián)用link標(biāo)簽。在這點(diǎn)上，排除style樣式的干擾（第四點(diǎn)會(huì)提到），樣式優(yōu)先級(jí)遵循后來居上的原則，也就是說，樣式表 里后面聲明的樣式較之前面聲明的優(yōu)先級(jí)更高。比如：在style.css這個(gè)文件里，在第一行聲明了這樣的樣式：


在第三行聲明了這樣的樣式：


那么，最終p的字體顏色為黑色。

2、樣式表鏈接的位置：同一條樣式可能聲明在兩個(gè)樣式表中，同一個(gè)html頁面可能同時(shí)調(diào)用這兩個(gè)樣式表，這時(shí)候樣式的優(yōu)先級(jí)依然可以用后來居上的原則，只不過這時(shí)候的后來居上對(duì)象不同而已。比如：在一個(gè)html頁面中，head代碼如下：


這個(gè)時(shí)候，如果在firstStyle.css里聲明這樣的樣式：


而在secondStyle.css里聲明了這樣的樣式：


那么，最終p的字體顏色為黑色。它取決于后面鏈接的樣式表。

三、“重要”
“important”是重要的意思，加了感嘆號(hào)之后就是重中之重了，因此，一般的樣式聲明對(duì)它來說就有如逍遙游中的鯤鵬，最終只能“望洋興嘆”了。但是 從“載”中我們又將思考，如果在用戶樣式表中聲明了important樣式，并在作者樣式表中也聲明了important樣式，那么誰的優(yōu)先級(jí)高呢？
于是第二點(diǎn)中“位”的說明似乎又有了一定的局限性了。從“載”出發(fā)，結(jié)合important，優(yōu)先級(jí)比較又可以延伸出下面5點(diǎn)：
1、用戶端聲明的樣式
2、無!important的用戶樣式
3、無!important的作者樣式
4、加了!important的作者樣式
5、加了!important的用戶樣式
按順序，以升序排序。即第5點(diǎn)的樣式高于第4點(diǎn)，其他以此類推。對(duì)于開發(fā)人員來說，應(yīng)該說加了important是最高級(jí)別了，后來的樣式也無法替代它 了，這也是為什么在樣式中應(yīng)盡可能地避免使用important的原因。因?yàn)橐坏┞暶髁薸mportant，樣式級(jí)別達(dá)到最高，css最核心的機(jī)制，即層 疊，就失去了意義。這點(diǎn)還是有必要注意的。

四、“特殊”
在對(duì)“位”的描述中，我把style標(biāo)簽掠過了，直接進(jìn)入一個(gè)觀點(diǎn)，即后來居上的原則；并舉了p標(biāo)簽的例子。其實(shí)對(duì)于有經(jīng)驗(yàn)的前端人員來說，像我舉的例子 是不成“體統(tǒng)”的，因?yàn)闆]多少人會(huì)閑的無聊在同一個(gè)樣式表聲明兩個(gè)p元素的樣式，用來后面替代前面的。而事實(shí)上，我也只是想說明那個(gè)原則而已。好吧，那就 再舉一個(gè)例子，來闡述“特殊”這一點(diǎn)。先一段html代碼：


下面的樣式寫進(jìn)名為style.css的樣式表中：


對(duì)于你所看到的，會(huì)發(fā)現(xiàn)p的字體顏色為黑色；當(dāng)刪除style標(biāo)簽樣式，p的字體顏色為紅色；再刪除樣式表的第一行，為黃色，依此為藍(lán)色、灰色。
css的這種特性稱為“特殊性”對(duì)比，是有一套既成的對(duì)比方式的，可以用a,b,c,d四個(gè)字母帶代表他們的方位。a指擁有style標(biāo)簽，b指ID選擇器，c指類選擇器和偽類，d指元素選擇器和偽元素。
它們的比較方式是：當(dāng)a相同，比較b；a,b相同,比較c；a,b,c相同，比較d，都相同呢？“后來居上”了。

針對(duì)上面的例子來說明。因?yàn)閜中存在style，也就是a存在，所以優(yōu)先級(jí)最高，所以p的字體顏色為黑色。當(dāng)刪除了style，a不存在，于是考慮ID選擇器，第一條css聲明有3個(gè)ID，較之后面的都多，所以它就是最終的樣式；以此類推。

結(jié)語：原本只想花點(diǎn)時(shí)間寫寫的，沒想到用了這么多時(shí)間，有點(diǎn)夸張！文中應(yīng)該說差不多都涵蓋了優(yōu)先級(jí)的各個(gè)方面了，不知道大家是否能夠看得清晰，文中的代碼 有的并沒有經(jīng)過測試，只是憑著一些經(jīng)驗(yàn)和曾經(jīng)的實(shí)驗(yàn)得出的，結(jié)果或許有誤，如有發(fā)現(xiàn)，請指出。但總的來說，還是比較負(fù)責(zé)任的，不至于“誤人子弟”。就此結(jié) 文...

最新評(píng)論