css樣式的優先級究竟龐雜到什么程度

2024-08-30 08:34:59

字體：大中小

來源：轉載

供稿：網友

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

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

而原本的效果如下：

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

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

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

復制代碼

上一篇：我的css架構理念―因人而異沒有最優只有適合

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