css樣式的優(yōu)先級究竟龐雜到什么程度

2024-08-30 08:34:59

字體：大中小

供稿：網(wǎng)友

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

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

而原本的效果如下：

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

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

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

復(fù)制代碼

上一篇：我的css架構(gòu)理念―因人而異沒有最優(yōu) 只有適合

下一篇：三種方式實現(xiàn)元素水平居中顯示與固定布局和流式布局概念理解