我們先去mdn看看官方的解釋：
優先順序是如何計算的？我們從上面一段描述中得到個很重要的資訊：權重優先順序就是分配給指定的 css 宣告的乙個權重，它由 匹配的選擇器中的 每一種選擇器型別的 數值 決定。
而當優先順序與多個 css 宣告中任意乙個宣告的優先順序相等的時候，css 中最後的那個宣告將會被應用到元素上。
當同乙個元素有多個宣告的時候，優先順序才會有意義。因為每乙個直接作用於元素的 css 規則總是會接管/覆蓋（take
over）該元素從祖先元素繼承而來的規則。
我們再來看選擇器優先順序關係：id選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標籤選擇器 = 偽元素選擇器。
看來真相已經呼之欲出了。
我們只要給不同型別的選擇器設定乙個權重值，然後在根據選擇器的數量進行相加，就很容易得出優先順序，例如：
id選擇器的權重值設為 1000
類選擇器 、屬性選擇器 、偽類選擇器的權重值設為 100
標籤選擇器、偽元素選擇器的權重值設為 10
我們可以很快速的計算出下面這段css的權重值並作出正確的判斷。
//權重值1110
//權重值210
.menu.menu .item
//權重值30
.item.item.item
.item...x200 {}），那麼低優先順序的權重值就可以超過高優先順序的權重值，但實際效果其實還是以高優先順序樣式為準。當出現這種情況時可能用現在的權重值計算方式就無法解釋了！
當然可以通過限制選擇器的最大數量及拉**擇器的權重值數值還是可以解釋的，但我總覺得這不是一種好的實現方式。我們假設權重值是用
unsigned int變數儲存，那麼該變數的bit位一共有32位（4位元組），我們從高位按位元組展開如下：
位元組1：00000000
位元組2：00000000
位元組3：00000000
位元組4：00000000
按位元組和選擇器對應：
位元組1：00000000
位元組2：00000000 ;id選擇器
位元組3：00000000 ;類選擇器 、屬性選擇器 、偽類選擇器
位元組4：00000000 ;標籤選擇器、偽元素選擇器
相同型別選擇器直接進行個數相加，並填入到指定位元組內。
例1：
得到的權重值bit位如下：
00000000 00000001 00000001 00000001例2：
.menu.menu .item{}bit位如下：
00000000 00000000 00000010 00000001例3：
.item.item.item{}bit位如下：
00000000 00000000 00000000 00000011上面示例中位儲存容量只有8位，所以選擇器的最大限制為255，當然我們可以提高bit位來提高選擇器的最大值。這裡介紹了2種css優先順序理解方式，你覺得那種更適合你呢？
CSS的4種引入方式及優先順序
第一 css的四種引入方式 1.行內樣式 最直接最簡單的一種，直接對html標籤使用style 例如 缺點 html頁面不純淨，檔案體積大，不利於蜘蛛爬行，後期維護不方便。2.內嵌樣式 內嵌樣式就是將css 寫在之間，並且用進行宣告，例如 3.鏈結樣式 優缺點 實現了頁面框架 與表現css 的完全分...
CSS 建立方式與優先順序
最近想學習自動化測試 web元素的匹配查詢，一直搞不懂css的相關標籤與對元素的渲染方式。本文 w3school 當同乙個 html 元素被不止乙個樣式定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。瀏覽器預設設定 外部樣式表...
CSS的優先順序
選擇器一樣的情況下後面的會覆蓋前面的屬性。比如 p p p元素的元素將是藍色，因為遵循後面的規則。然而，你不可能經常用相同的選擇器衝突達到目的，當你使用巢狀選擇器，合理的衝突來了。比如 div p p 也許你看起來p元素在div元素裡面的顏色是藍色，就像後面p元素的規則，但是第乙個選擇器的特性卻是紅...