最初接觸css選擇器優先順序這一塊的內容的時候，是以下面這張圖為準：
他裡面講的css選擇器是按照如下的這種方式計算優先順序的：
看到上面圖我就突然想到css選擇器優先順序會不會是按照位數來計算的，隨後我嘗試用11個class去覆蓋1個id的樣式，但是覆蓋失敗，所以最初的那種計算方式是錯誤的，隨後我接著查詢看到了下面這篇文章：有趣：256個class選擇器可以乾掉1個id選擇器
根據裡面的例子在ie下面256個class選擇器可以乾掉1個id選擇器，計算機資訊都是以二進位制儲存的，8位就是00000000-11111111，有2^8種變化，也就是256種變化，那這麼說瀏覽器儲存class的形式就是按照位數來進行計算的，但是256個class選擇器在非ie下是幹不掉1個id選擇器，可能是以更大的16位來算吧（或者是做了不溢位的判斷），例如上面文章中說到的opera瀏覽器。
之所以最初的那種計算方式沒有出過錯，是因為我們很少去定義這麼多的選擇器，但是我們還是需要知道一些極限問題，這樣更有利於我們進行編碼。
所以關於css的優先順序計算問題請記住 style > id > class / 屬性選擇器 / 偽類選擇器 > 元素 / 偽元素，不要想著去用 後面的選擇器 靠溢位覆蓋 前面選擇器 的樣式，一般採用同級別去覆蓋。
例如：
style
="color
: #f00;
" id
="blue"
class
="green"
>
123456div
>
body #blue
html body .green
div
style
idclass
元素#f0010
00#00f01
01#0f000
12#33300
01color規則從左側一列一列作對比，#f00的style為1，其他的為0，所以最終採用樣式為#f00，就不再往後考慮。
還有就是css規則中如果有多個宣告的優先順序相等的時候，css中最後的那個宣告將會被應用到元素。
以下列出的幾種選擇器的優先順序是不斷遞增的（以下內容摘自：
型別選擇器（也叫元素選擇器或者標籤選擇器，例如 h1）和 偽元素（例如 ::before）
類選擇器 (例如 example)，屬性選擇器（例如 [type=「radio」]），偽類（例如 :hover）
id選擇器（例如 #example）
內聯樣式即直接在標籤上面通過style定義的樣式
!important，當在乙個樣式宣告中使用乙個 !important 規則時，此宣告將覆蓋任何其他宣告。當前如果想要覆蓋 !important ，也可以通過在樣式定義再通過id/class等去覆蓋。
通配選擇符(*)，關係選擇符 (+, >, ~, 』 ') 和 否定偽類(:not()) 對優先順序沒有影響。（但是在 :not() 內部宣告的選擇器是會影響優先順序）。
選擇器優先順序 CSS選擇器優先順序總結
css選擇器優先順序這個問題，相信有點經驗前端都會認為非常簡單，但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧，一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表，為了保持不同瀏覽器下樣式相同，所以我們的自定義樣式表一般都會覆...
CSS 選擇器優先順序
css優先順序包含四個級別 文內選擇器，id選擇器，class選擇器，元素選擇器 以及各級別出現的次數。根據這四個級別出現的次數計算得到css的優先順序。css優先順序的計算規則如下 頁面中直接設定style,加1,0,0,0 每個id選擇器 如 id 加0,1,0,0 每個class選擇器 如 c...
css選擇器優先順序
css優先順序即css樣式在瀏覽器中被解析出來的先後順序。css優先順序包含四個級別 行內樣式，id選擇符，class類選擇符，元素選擇符 以及各級別出現的次數。繼承是css的乙個主要特徵，然後繼承的權重很低，比普通元素還要低。1.行內樣式 類似css 的樣式 的優先順序為1，0，0，0，始終高於外...