一.按css語句位置:
內聯 > 內部 > 外部
css的繼承性: 最近的祖先樣式比其他祖先樣式優先順序高,而自身的樣式比祖先樣式的高。示例:
style
="color
: red;
border
: 1px solid #ccc;
">
紅色 style
="color
:green
">
綠色style
="color
:blue
">
藍色span
>
p>
div>
最終結果如圖1:
二.按選擇器的優先順序由高到低排序:
內聯樣式 > id 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標籤選擇器 = 偽元素選擇器 > 通配選擇器
各項示例:
三. 多個選擇器優先順序計算
計算選擇符中 id 選擇器的個數（a） 計算選擇符中類選擇器
屬性選擇器以及偽類選擇器的個數之和（b）
計算選擇符中標籤選擇器和偽元素選擇器的個數之和（c）
按 a、b、c 的順序依次比較大小，大的則優先順序高，相等則比較下乙個。若最後兩個的選擇符中 a、b、c 都相等，則按照"就近原則"來判斷，即語句距離其對應的元素**位置越近，優先順序越高。
四.屬性後面的**!important**擁有最高樣式優先順序
!important可以讓當前css屬性的優先順序提公升至最高,即比內聯的樣式（style)更高，如
.li-blue
css樣式優先順序詳解
很多人在寫 的過程中會出現css樣式衝突的情況，那麼我們怎樣才能應用我們想用的樣式，下面就個人經驗寫了一點總結！1.權值 瀏覽器是根據權值來判斷使用哪種css樣式的，哪種樣式權值高就使用哪種樣式 標籤的權值是 1 類 class 選擇器的權值是 10 id選擇器的權值是 100 偽元素 first ...
css 優先順序
當我們的css樣式中，如果同個元素有兩個或以上衝突的css規則，瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出，也就是常講的css優先順序。一般情況下，你不必擔心css樣式衝突，但對於大型而且複雜的css樣式檔案，或有很多css檔案組成的，就非常有可能產生衝突。下面我們通過2個簡單的例項來了解一下...
css優先順序
今天在使用公司內部框架的時候，發現乙個問題。我在頁面的style元素裡面寫了乙個class選擇器，可是卻不起作用。使用f12檢視，發現是當前的樣式沒有起作用，而是被框架生成的樣式代替掉了。當然，寫內嵌的樣式肯定是沒問題。可問題就是，我明明在頁面內部寫了樣式，按照常理，應該是我手寫的類選擇器的優先順序...