首先歸納一下最基本的css優先級。

從CSS代碼存放位置看權重優先級：內嵌樣式 > 內部樣式表 > 外聯樣式表。其實這個基本可以忽視之，大部分情況下CSS代碼都是使用外聯樣式表。

從樣式選擇器看權重優先級：important > 內嵌樣式 > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符。

那么樣式選擇器中又是如何詳細計算的呢？

CSS權重是由四個數值決定，如圖所示

：

第一等：代表內聯樣式，如: style=””，權值為1000。

第二等：代表ID選擇器，如：#content，權值為100。

第三等：代表類，偽類和屬性選擇器，如.content，權值為10。

第四等：代表類型選擇器和偽元素選擇器，如div p，權值為1。

最后把這些值加起來，再就是當前元素的權重了。

權重算出來了，但是某個元素到底用哪個樣式，還有3個規則,：

1，如果樣式上加有!important標記，例如：

p{ color: gray !important}

那么始終采用這個標記的樣式。

2，匹配的內容按照CSS權重排序，權重大的優先；

可以看到，CSS權重只是決定應用哪個樣式的其中一個步驟，不過這個步驟是最復雜的，上面已經說過了。

3，如果權重也一樣，按照它在CSS樣式表里聲明的順序，后聲明的優先。(可以理解為代碼由上到下執行后邊的代碼對前邊的進行了覆蓋)

注意：通用選擇器(*)，子選擇器(>)和相鄰同胞選擇器(+)并不在這四個等級中，所以他們的權值都為0。

理解選擇器的特殊性很重要，特別是在修復bug的時候，因為你需要了解哪些規則優先及其原因。

如果你遇到了似乎沒有起作用的CSS規則，很可能是出現了特殊性沖突。請在你的選擇器中添加他的一個父元素的ID，從而提高它的特殊性。如果這能解決問題，就說明樣式表中其他地方很可能有更特殊的規則，它覆蓋了你的規則。如果是這種情況，你可能需要檢查代碼，解決特殊性沖突，讓代碼盡可能簡潔。

總結

以上是生活随笔為你收集整理的css选择器权重排序_css选择器的权重计算的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。