[摘]CSS的優先順序探討

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

摘自百度文檔：http://wenku.baidu.com/view/177b11d3240c844769eaee1a.html

雖然個人很支援部落格園裡面原創的教程，但是有時候遇到好的文章也很想跟大家分享一下，下面這篇文章對CSS優先順序闡述得非常詳細，對深入研究CSS大有裨益，因此轉到個人部落格上，希望對大家有協助。

一、CSS的優先順序

1、標有"!important"的規則有最高優先順序
一個樣式規則可以有一個"important"附帶標籤，表示該樣式規則具有最高優先順序。例如下面例子中，前景色彩被標為important。
H1{color:black !importan; font-family:sans-serif}
注意：這種聲明容易引起混亂，因此通常使用得較少。

2、創作者規則優先順序高於瀏覽者規則
瀏覽器允許瀏覽者建立樣式規則以覆蓋系統預設值。在此情況下，由網頁創作者明確設定得樣式優先順序較高，而瀏覽者設定得樣式規則優先順序較低。

3、更特殊得規則優先於不夠特殊的規則

在決定特殊性時，selector中的ID屬性有最高優先順序。基於ID selector的優先順序可通過計數Selector中類屬性的數量確定，數量越多優先順序越高。假如規則仍然無法確定優先順序，則HTML元素名的數量決定了特殊性。

4、在同一個層級的情況下，最後指定的規則有優先權

假如兩個或更多的規定在應用了前三個規定具有相同優先順序，則後給出的規則優先於早先給出的規則。如果在網頁的HEAD標記中同時使用了STYLE標記符（指定內置樣式）和LINK標記符（指定連結式樣式），並且這兩個樣式指定中同時應用了具有同一優先順序別的樣式，則STYLE標記符和LINK標記符的先後順序將決定樣式的優先順序。例如，如果在LINK所連結的樣式表（mycss.css）中定義了以下一條樣式規則：H1{color:red}同時在內置樣式定義中也定義了一條規則：H1{color:yellow}在網頁中的樣式定義如下所示：

<HEAD><LINK rel=stylesheet href="mycss.css" type="text/css">
<STYLE>
H1{color:yellow}
</STYLE></HEAD>

由於STYLE標記符中定義的樣式後出現，因此它具有更高的優先順序，所以網頁中H1標記符的內容將顯示為黃色（yellow)。同樣，如果將Link標記符的位置移動到<STYLE></STYLE>標記符之後，則網頁中H1標記符的內容將顯示為紅色（red)。另外，由於直插式樣式（使用HTNL標記的style屬性設定的樣式）的位置最接近於樣式作用的標記符，因此它通常具有高優先順序。

二、css優先順序的四大原則：

原則一：繼承不如指定

如果某樣式是繼承來的永遠不如具體指定的優先順序高。例子1：

CODE:

<style type="text/css"> <!-- *{font-size:20px} .class3{ font-size: 12px; } --> </style> <span class="class3">我是多大字型大小？</span>

運行結果：.class3{ font-size: 12px; }
例子2：
CODE:

<style type="text/css"> <!-- #id1 #id2{font-size:20px} .class3{font-size:12px} --> </style> <div id="id1" class="class1"> <p id="id2" class="class2"> <span id="id3" class="class3">我是多大字型大小？</span> </p> </div>

運行結果：.class3{ font-size: 12px; }
注意：後面的幾大原則都是建立在“指定”的基礎上的。

原則二： #ID > .class > 標籤選擇符

例子：CODE:

<style type="text/css"> <!-- #id3 { font-size: 25px; } .class3{ font-size: 18px; } span{font-size:12px} --> </style> <span id="id3" class="class3">我是多大字型大小？</span>

運行結果：#id3 { font-size: 25px; }

原則三：越具體越強大。

解釋：當對某個元素的CSS選擇符樣式定義的越具體，層級越明確，該定義的優先順序就越高。

CODE:

<style type="text/css"> <!-- .class1 .class2 .class3{font-size: 25px;} .class2 .class3{font-size:18px} .class3 { font-size: 12px; } --> </style> <div class="class1"> <p class="class2"> <span class="class3">我是多大字型大小？</span> </p> </div>

運行結果：.class1 .class2 .class3{font-size: 25px;}

原則四：標籤#id >#id ; 標籤.class > .class

上面這條原則大家應該也都知道，看例子

CODE:

<style type="text/css"><!--span#id3{font-size:18px}#id3{font-size:12px}span.class3{font-size:18px}.class3{font-size:12px}--></style><span id="id3">我是多大字型大小？</span><span class="class3">我是多大字型大小？</span>

運行結果：span#id3{font-size:18px} span.class3{font-size:18px}

很多人會有這樣的疑問，為什麼不把這個原則四歸入原則一形成：【標籤#ID > #ID > 標籤.class > .class > 標籤選擇符 > 萬用字元】呢？或者將 “標籤.class” 看作多更為具體的 “.class” 從而歸入原則二呢？後面我將解答各位的疑惑，這就涉及到CSS的解析規律---------這四大原則間也是有優先順序的，是不是有些糊塗了？別急，繼續看。

*四大原則的權重

相信很多人都知道上面的四大原則，不要以為知道了這四大原則就能分辨css中那條代碼是起作用的，不信？那你5秒內能肯定的知道下面這段代碼，測試中的文字的字型大小嗎？

CODE:

<style type="text/css"><!--.class1 p#id2 .class3{font-size:25px}div .class2 span#id3{font-size:18px}#id1 .class3{font-size:14px}.class1 #id2 .class3{font-size:12px}#id1 #id2{font-size:10px}--></style><div id="id1" class="class1"><p id="id2" class="class2"> <span id="id3" class="class3">我是多大字型大小？</span> </p></div>

為了大家方便閱讀，我去掉了一些代碼。

四大原則的權重就是: 原則一 > 原則二 > 原則三 > 原則四
解釋：
首先遵循原則一
有指定開始使用下面的原則，無指定則繼承離他最近的定義。
然後開始原則二

1、比較最高優先順序的選擇符例子：

CODE:

<style type="text/css"><!--#id3{font-size:18px}.class1 .class2 .class3{font-size:12px} /* 描述的再具體也不起作用 --- 原則二 */.class3{font-size:18px}div p span{font-size:12px}--></style><div id="id1" class="class1"><p id="id2" class="class2"> <span id="id3" class="class3">我是多大字型大小？</span> </p></div>

運行結果：#id3{font-size:18px}
刪掉上面CSS中的前兩行可以得出，如果沒有最進階別的#ID會尋找.class 即使後面的CSS按照“原則二” 描述的再具體也無法突破原則一。

2、如果兩條CSS的如果最高選擇符優先順序一樣，則比較他們的數量例子：

CODE:

<style type="text/css"><!--.class1 #id3{font-size:12px}.class1 .class2 #id3{font-size:14px}--></style>

<div id="id1" class="class1"><p id="id2" class="class2"> <span id="id3" class="class3">我是多大字型大小？</span> </p></div>

運行結果:.class1 .class2 #id3{font-size:14px}

3、如果最高選擇符層級和數量都一樣，則按照原則二比較他們下一級，以此類推。例子1：

CODE:

<style type="text/css"><!--#id1 .class2 .class3{font-size:14px}div .class2 #id3{font-size:12px}--></style><div id="id1" class="class1"><p id="id2" class="class2"> <span id="id3" class="class3">我是多大字型大小？</span> </p></div>

運行結果:#id1 .class2 .class3{font-size:14px}

*最進階選擇符的位置沒有高下之分，論證：CODE:

<style type="text/css"><!--#id1 .class2 .class3{font-size:18px}.class1 #id2 .class3{font-size:14px}.class1 .class2 #id3{font-size:12px}--></style><div id="id1" class="class1"><p id="id2" class="class2"> <span id="id3" class="class3">我是多大字型大小？</span> </p></div>

上例中更換3條CSS的先後可以得出，哪條位於最後，哪條起作用。說明他們的層級一樣，後面的將覆蓋前面的。
*將原則四歸入原則二的不合理性，論證：CODE:

<style type="text/css"><!--.class1 span#id3{font-size:14px}#id1 .class2 .class3{font-size:12px}--></style><div id="id1" class="class1"><p id="id2" class="class2"> <span id="id3" class="class3">我是多大字型大小？</span> </p></div>

#id1 .class2 .class3{font-size:12px}

可以看到span#id3並不比#id1高出一個層級。
無結果開始原則三如果比較結果，選擇符從最進階開始都對應，層級上的數量也相同，則開始比較誰更具體。例子：CODE:

<style type="text/css"><!--#id1 .class2 span{font-size:14px}.class1 #id3{font-size:12px}--></style><div id="id1" class="class1"><p id="id2" class="class2"> <span id="id3" class="class3">我是多大字型大小？</span> </p></div>

#id1 .class2 span{font-size:14px}
當然也可以理解為在原則二層層比較中“少一個層級的樣式”，缺少的那個層級沒有“層級較多的樣式”多出的那個層級的層級高。（繞口令）
*將原則四歸入原則三的不合理性，論證：
CODE:

<style type="text/css"><!--.class2 .class3{font-size:14px}span.class3{font-size:12px}--></style><div id="id1" class="class1"><p id="id2" class="class2"> <span id="id3" class="class3">我是多大字型大小？</span> </p></div>

上例中可以看出，如果將原則四併入原則三，將span.class3看作兩層，那麼應該和.class2 .class3層級一樣多，那麼應該顯示12px,而事實不是這樣。
最終對決原則四如果還分不出結果，則開始原則四的比較：例子1：CODE:

<style type="text/css"><!--.class1 p.class2 .class3{font-size:14px}.class1 .class2 .class3{font-size:12px}--></style><div id="id1" class="class1"><p id="id2" class="class2"> <span id="id3" class="class3">我是多大字型大小？</span> </p></div>

.class1 p.class2 .class3{font-size:14px}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More