關鍵字：css，優先順序，巢狀
很經典的文章啊，看完之後 —— 感覺似乎明白了許多，似乎又更加糊塗了。
如果同個元素有兩個或以上衝突的css規則，瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出。
它可能不像其它那麼重要，大部分案例你不需要擔心衝突，但大型而且複雜的css檔案，或有很多css檔案組成的，可能產生衝突。
選擇器一樣的情況下後面的會覆蓋前面的屬性。比如：
p
pp元素的元素將是藍色，因為遵循後面的規則。
然而，你不可能經常用相同的選擇器衝突達到目的，當你使用巢狀選擇器，合理的衝突來了。比如：
div p
p也許你看起來p元素在div元素裡面的顏色是藍色，就像後面p元素的規則，但是第乙個選擇器的特性卻是紅色。基本上，乙個選擇器越多特性，樣式衝突的時候將顯示它的樣式。
一組巢狀選擇器的實際特性可以計算出來。基本的，使用id選擇器的值是100，使用class選擇器的值是10，每個html選擇器的值是1。它們加起來就可以計算出特性的值。
p的特性是1（乙個html選擇器）
div p的特性是2（兩個html選擇器）
.tree的特性是10（1個class選擇器）
div p.tree的特性是1+1+10=12，（兩個html選擇器，乙個class選擇器）
#baobab的特性是100（1個id選擇器）
body #content .alternative p的特性是112（兩個html選擇器，乙個id選擇器，乙個類選擇器）
按照上面的規則，div p.tree的特性比div p高，body #content .alternative p又比它們兩個都高。
css優先順序的四大原則：
原則一： 繼承不如指定
如果某樣式是繼承來的永遠不如具體指定的優先順序高。
例子1：
code:
我是多大字型大小？
執行結果：.class3
例子2：
code:
我是多大字型大小？
執行結果：.class3
注意：後面的幾大原則都是建立在「指定」的基礎上的。
原則二： #id >.class >標籤選擇符
例子：code:
我是多大字型大小？
執行結果：#id3
原則三：越具體越強大。
解釋：當對某個元素的css選擇符樣式定義的越具體，層級越明確，該定義的優先順序就越高。
code:
我是多大字型大小？
執行結果：.class1 .class2 .class3
原則四：標籤#id >#id ; 標籤.class >.class
上面這條原則大家應該也都知道，看例子
code:
我是多大字型大小？
我是多大字型大小？
執行結果：span#id3 | span.class3
很多人會有這樣的疑問，為什麼不把這個原則四歸入原則一形成：
【 標籤#id >#id >標籤.class >.class >標籤選擇符 >萬用字元 】 呢？或者將 「標籤.class」 看作多更為具體的 「.class」 從而歸入原則二呢？後面我將解答各位的疑惑，這就涉及到css的解析規律---------這四大原則間也是有優先順序的，是不是有些糊塗了？別急，繼續看。
*四大原則的權重
相信很多人都知道上面的四大原則，不要以為知道了這四大原則就能分辨css中那條**是起作用的，不信？那你5秒內能肯定的知道下面這段**，測試中的文字的字型大小嗎？
code:
我是多大字型大小？
為了大家方便閱讀，我去掉了一些**。
四大原則的權重就是: 原則一 >原則二 >原則三 >原則四
解釋：首先遵循原則一
有指定開始使用下面的原則，無指定則繼承離他最近的定義。
然後開始原則二
1、比較最高優先順序的選擇符
例子：code:
我是多大字型大小？
執行結果：#id3
刪掉上面css中的前兩行可以得出，如果沒有最高端別的#id會尋找.class 即使後面的css按照「原則二」 描述的再具體也無法突破原則一。
2、如果兩條css的如果最高選擇符優先順序一樣，則比較他們的數量
例子：code:
我是多大字型大小？
執行結果:.class1 .class2 #id3
3、如果最高選擇符級別和數量都一樣，則按照原則二比較他們下一級，以此類推。
例子1：
code:
我是多大字型大小？
[color=orange]
執行結果:#id1 .class2 .class3
[/color]
*最高端選擇符的位置沒有高下之分，論證：[code]code:
我是多大字型大小？
上例中更換3條css的先後可以得出，哪條位於最後，哪條起作用。說明他們的級別一樣，後面的將覆蓋前面的。
*將原則四歸入原則二的不合理性，論證：
code:
我是多大字型大小？
#id1 .class2 .class3
可以看到span#id3並不比#id1高出乙個級別。
無結果開始原則三
如果比較結果，選擇符從最高端開始都對應，級別上的數量也相同，則開始比較誰更具體。
例子：code:
我是多大字型大小？
#id1 .class2 span
當然也可以理解為在原則二層層比較中「少乙個層級的樣式」，缺少的那個層級沒有「層級較多的樣式」多出的那個層級的級別高。（繞口令）
*將原則四歸入原則三的不合理性，論證：
code:
我是多大字型大小？
上例中可以看出，如果將原則四併入原則三，將span.class3看作兩層，那麼應該和.class2 .class3層級一樣多，那麼應該顯示12px,而事實不是這樣。
最終對決原則四
如果還分不出結果，則開始原則四的比較：
例子1：
code:
我是多大字型大小？
.class1 p.class2 .class3
寫點我自己的總結：
先看是否描述到該元素，再看最高端別的等級和數量（#id>class，html#id>#id），同級級別&數量一致時，再看下一級屬性。
css 優先順序
當我們的css樣式中，如果同個元素有兩個或以上衝突的css規則，瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出，也就是常講的css優先順序。一般情況下，你不必擔心css樣式衝突，但對於大型而且複雜的css樣式檔案，或有很多css檔案組成的，就非常有可能產生衝突。下面我們通過2個簡單的例項來了解一下...
css優先順序
今天在使用公司內部框架的時候，發現乙個問題。我在頁面的style元素裡面寫了乙個class選擇器，可是卻不起作用。使用f12檢視，發現是當前的樣式沒有起作用，而是被框架生成的樣式代替掉了。當然，寫內嵌的樣式肯定是沒問題。可問題就是，我明明在頁面內部寫了樣式，按照常理，應該是我手寫的類選擇器的優先順序...
css優先順序
css樣式分為 外部樣式，內部樣式，內聯樣式 選擇器優先權 1.內聯樣式表的權值最高 1000 2.id 選擇器的權值為 100 3.class 類選擇器的權值為 10 4.html 標籤選擇器的權值為 1 css 優先順序法則 a 選擇器都有乙個權值，權值越大越優先 b 當權值相等時，後出現的樣式...