溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css權重是什么意思，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
css權重指的是css選擇符的優先級，優先級高的css樣式會覆蓋優先級底的css樣式，優先級越高說明權重越高，反之亦然。css權重基于設定的匹配規則，瀏覽器通過設定好的優先級來判斷哪些屬性值DOM元素最為相關，從而在該DOM上應用這些值。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css權重是什么
css權重指的是css選擇器的優先級，優先級高的css樣式會覆蓋優先級底的css樣式，優先級越高說明權重越高，反之亦然。
css權重基于設定的匹配規則，瀏覽器通過設定好的優先級來判斷哪些屬性值DOM元素最為相關，從而在該DOM上應用這些值。
簡單理解就是一個DOM的某個屬性值有多個css樣式設置，優先級高的那個應用。很多css設置不生效的問題，都是因為在某處定義了一個更高的優先級，從而導致該處樣式不生效。
優先級的順序如下：
important > 內聯(style) > ID > 類(class) > 標簽(li...) | 偽類(:hover,:focus...) | 屬性選擇[attr=''] > 偽對象(:before,:after) > 通配符(*) > 繼承(inherit)
那么如何確定優先級呢？
css權重計算規則
計算css權重是有一定規則的，根據w3c制定的css規范，css權重計算規則如下：
a）、計算選擇符中的id選擇器的數量
一個id選擇器為一個a，一個a為100
b）、計算選擇符中的類選擇器、屬性選擇器以及偽類選擇器的數量
一個類選擇器、屬性選擇器以及偽類選擇器為一個b，一個b為10
c）、計算標簽類型選擇器和偽對象選擇器的數量
一個標簽類型選擇器、偽對象選擇器為一個c，一個c為1
d）、忽略通配符選擇器
通配符選擇器忽略不計
如下面這張圖就是一個css選擇器權重的例子：
如果兩個選擇符的權重相同，則可依照”就進原則”來判斷，最后定義的選擇符會被采用。但盡量避免出現這種依靠定義的順序決定選擇符優先級的情況，因為在后續的維護中很難保證定義的順序不會被打亂。
優先級的基本規則
1.相同的權重：以后面出現的選擇器為最后規則
假如在外部樣式表中，同一個CSS規則你寫了兩次，那么出現在前面的選擇器權重低，你的樣式會選擇后面的樣式：
#content h2 { padding: 5px;
}
#content h2 { padding: 10px;
}兩個選擇器的權重都是0，1，0，1，最后那個規則生效。
2.不同的權重，權重值高則生效
Id選擇器的優先級比屬性選擇器高,比如下面的例子里 樣式表中#p123的權重明顯比[id=p123]的權重要高。
a#a-02 { background-image : url(n.gif); }
a[id="a-02"] { background-image : url(n.png); }3.就近原則
如我在樣式表中對DOM定義的樣式A,然后我又在html也對DOM定義了B,應用B
.A { padding: 5px;
}<style type="text/css">
.B { padding: 10px;
}
</style>4.無論多少個元素組成的選擇器，都沒有一個class選擇器優先級高。
就是上面的那個例外。
5.無視DOM樹的距離
如下樣式：
body h2 { color: green;
}
html h2 { color: purple;
}當它應用在下面的HTML時:
<html><body> <h2>Here is a title!</h2> </body></html>
瀏覽器會將它渲染成purple;
實際上規則1也適用于此，不過由于其DOM負極標簽的不同，故單拎出來特殊化。
6.:not 偽類例外
:not 否定偽類在優先級計算中不會被看作是偽類. 事實上, 在計算選擇器數量時還是會把其中的選擇器當做普通選擇器進行計數.
div.outer p {
color:orange;
}
div:not(.outer) p {
color: lime;
}當它被應用在下面的HTML時,就是文字描述效果
<div class="outer"> <p>orange</p> <div class="inner"> <p>lime</p> </div> </div>
7.!important 規則例外
當在一個樣式聲明上使用 !important 規則時，該樣式聲明會覆蓋CSS中任何其他的聲明。
盡管技術上 !important 與優先級毫無關系，但是它們之間直接相互影響。
使用 !important 是一個壞習慣，應該盡量避免，因為這打斷了樣式表中的固有的級聯規則 使得調試找bug變得更加困難了。
當兩條相互沖突的帶有!important 規則的聲明被應用到相同的元素上時，擁有更大優先級的聲明將會被采用。
css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等
關于“css權重是什么意思”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
