初學者可能對優先順序的概念不甚明白，但我們在寫css的時候經常遇到這些問題。優先順序主要是避免樣式宣告中的衝突。當針對同一元素的同一屬性有多個宣告時，並且這些宣告**相同，權重相同，那麼，更明確的css宣告將佔主導地位。
設想下面這個例子：
複製內容到剪貼簿
**:p
div.warning p
div#caution p
body#home div p
上面的樣式單中包含四條針對p元素的樣式，它們都包含一條針對color的宣告，瀏覽器需要明確那條宣告會被最終應用，p元素的最終color是什麼？
答案很簡單，最明確的選擇器宣告將佔據上風，瀏覽器通過分析選擇器的優先順序，並最終篩選出優先順序最高的宣告。
下面是同一選擇器多種宣告的比較過程：
如果多個選擇器具有相同的優先順序，根據級聯樣式單的規則：後來者居上.
w3c講述了計算優先順序的方法，計算結果用四個逗號分開的a，b，c，d矩陣來表示，a中代表的優先順序最高，d代表的是最次要，計算過程如下：
計算結果不是乙個具體的數值，而是可以相互比較的矩陣，回想前面例子中的一條宣告:
複製內容到剪貼簿
**:p
按照上面的公式，我們得到的是0，0，0，1，因為僅乙個元素型別。
正如前面所說，這不是數值，而是乙個矩陣，a代表最高的優先順序，d優先順序最低，從左到右，比較每欄的最高值，b欄的值會覆蓋c、d中的值，不論c和d中的值是多少。這樣，0，1，0，0的優先順序將比0，0，10，0高。
我們將計算的步驟拆分開來使之更易於理解。
首先計算a，如果在元素的style中定義其屬性，它的值就為1，否則為0，事實上，a欄的值只有一種情況。
你可以看到，內聯樣式的優先順序為1，0，0，0，例如：
引用:
red text這就是問什麼盡量避免使用內聯樣式的原因，因為內聯樣式總是具有最高的優先順序，唯一能改變它的方法是在css中使用！important宣告。
除了內聯樣式，我們需要計算b，c，d。看看下面這條規則的優先順序計算：
複製內容到剪貼簿
**:body#home div#warning p.message
上面的規則用來定義color屬性，既然沒有內聯樣式，第一欄a=0，如下表：
計算b欄中的值，統計id的數量，上面的選擇器中，有兩個id：#home和#warning，這樣b=2，如下表：
下一步，計算c欄的值，統計類選擇器、屬性選擇器、偽類的個數。（注：[id=」foo」與#foo是不相同的]）
上面的選擇器中，有乙個類選擇器.message，所以c=1，如下表：
最後是d，計算型別選擇器、偽類的個數，選擇器中有三個：body、div、p，沒有偽類元素，所以d=3，如下表:
就此打住，讓我們來看乙個更為複雜的例子，對於同乙個元素有不止乙個的color屬性，瀏覽器如何處理，下面是樣式單：
複製內容到剪貼簿
**:p.message
#home #warning p.message
#warning p.message
body#home div#warning p.message
p* body#home>div#warning p.message
#warning p
用上面的方法來分析這個樣式單。稍等，通用選擇符「*」和子選擇符「>」的優先順序是怎樣的？答案是他沒有任何優先順序，在就算中將被忽略，你可以將其當作0來對待。
在不看下面的結果之前，你是否已經分析出了選擇器的優先順序。
果是根據優先順序優先順序的高低來排列的：最高的在最上面，最低的屈居於下。你會看到，最上面的兩條級別相同，儘管它多了乙個通用選擇符和子選擇符。在這種情況下，後來者將佔據上風，如果你在頁面中使用上面的樣式，你將會看到，p元素的文字字型將會使紅色。
你也會看到，p.message優先順序低於#waring p。這是初學者經常遇到的問題，他們認為類選擇器更具體的匹配乙個元素。
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 當權值相等時，後出現的樣式...