站長(zhǎng)資訊網(wǎng)css權(quán)重指的是css選擇符的優(yōu)先級(jí)，優(yōu)先級(jí)高的css樣式會(huì)覆蓋優(yōu)先級(jí)底的css樣式，優(yōu)先級(jí)越高說明權(quán)重越高，反之亦然。css權(quán)重基于設(shè)定的匹配規(guī)則，瀏覽器通過設(shè)定好的優(yōu)先級(jí)來判斷哪些屬性值DOM元素最為相關(guān)，從而在該DOM上應(yīng)用這些值。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css權(quán)重是什么
css權(quán)重指的是css選擇器的優(yōu)先級(jí)，優(yōu)先級(jí)高的css樣式會(huì)覆蓋優(yōu)先級(jí)底的css樣式，優(yōu)先級(jí)越高說明權(quán)重越高，反之亦然。
css6大基礎(chǔ)選擇器：
a）、id選擇器(#box{})
b）、類選擇器(.box{})
c）、屬性選擇器(a[href="http://www.xxx.com"])
d）、偽類和偽對(duì)象選擇器(:hoevr{}和::after{})
e）、標(biāo)簽類型選擇器(p{})
f）、通配符選擇器(*{})
css權(quán)重基于設(shè)定的匹配規(guī)則，瀏覽器通過設(shè)定好的優(yōu)先級(jí)來判斷哪些屬性值DOM元素最為相關(guān)，從而在該DOM上應(yīng)用這些值。
簡(jiǎn)單理解就是一個(gè)DOM的某個(gè)屬性值有多個(gè)css樣式設(shè)置，優(yōu)先級(jí)高的那個(gè)應(yīng)用。很多css設(shè)置不生效的問題，都是因?yàn)樵谀程幎x了一個(gè)更高的優(yōu)先級(jí)，從而導(dǎo)致該處樣式不生效。
優(yōu)先級(jí)的順序如下：
important > 內(nèi)聯(lián)(style) > ID > 類(class) > 標(biāo)簽(li…) | 偽類(:hover,:focus…) | 屬性選擇[attr=''] > 偽對(duì)象(:before,:after) > 通配符(*) > 繼承(inherit)
那么如何確定優(yōu)先級(jí)呢？
css權(quán)重計(jì)算規(guī)則
計(jì)算css權(quán)重是有一定規(guī)則的，根據(jù)w3c制定的css規(guī)范，css權(quán)重計(jì)算規(guī)則如下：
a）、計(jì)算選擇符中的id選擇器的數(shù)量
一個(gè)id選擇器為一個(gè)a，一個(gè)a為100
b）、計(jì)算選擇符中的類選擇器、屬性選擇器以及偽類選擇器的數(shù)量
一個(gè)類選擇器、屬性選擇器以及偽類選擇器為一個(gè)b，一個(gè)b為10
c）、計(jì)算標(biāo)簽類型選擇器和偽對(duì)象選擇器的數(shù)量
一個(gè)標(biāo)簽類型選擇器、偽對(duì)象選擇器為一個(gè)c，一個(gè)c為1
d）、忽略通配符選擇器
通配符選擇器忽略不計(jì)
如下面這張圖就是一個(gè)css選擇器權(quán)重的例子：
如果兩個(gè)選擇符的權(quán)重相同，則可依照”就進(jìn)原則”來判斷，最后定義的選擇符會(huì)被采用。但盡量避免出現(xiàn)這種依靠定義的順序決定選擇符優(yōu)先級(jí)的情況，因?yàn)樵诤罄m(xù)的維護(hù)中很難保證定義的順序不會(huì)被打亂。
優(yōu)先級(jí)的基本規(guī)則
1.相同的權(quán)重：以后面出現(xiàn)的選擇器為最后規(guī)則
假如在外部樣式表中，同一個(gè)CSS規(guī)則你寫了兩次，那么出現(xiàn)在前面的選擇器權(quán)重低，你的樣式會(huì)選擇后面的樣式：
#content h1 { padding: 5px; } #content h1 { padding: 10px; }
兩個(gè)選擇器的權(quán)重都是0，1，0，1，最后那個(gè)規(guī)則生效。
2.不同的權(quán)重，權(quán)重值高則生效
Id選擇器的優(yōu)先級(jí)比屬性選擇器高,比如下面的例子里 樣式表中#p123的權(quán)重明顯比[id=p123]的權(quán)重要高。
a#a-02 { background-image : url(n.gif); } a[id="a-02"] { background-image : url(n.png); }
3.就近原則
如我在樣式表中對(duì)DOM定義的樣式A,然后我又在html也對(duì)DOM定義了B,應(yīng)用B
.A { padding: 5px; }
<style type="text/css"> .B { padding: 10px; } </style>
4.無論多少個(gè)元素組成的選擇器，都沒有一個(gè)class選擇器優(yōu)先級(jí)高。
就是上面的那個(gè)例外。
5.無視DOM樹的距離
如下樣式：
body h1 { color: green; } html h1 { color: purple; }
當(dāng)它應(yīng)用在下面的HTML時(shí):
<html><body> <h1>Here is a title!</h1> </body></html>
瀏覽器會(huì)將它渲染成purple;
實(shí)際上規(guī)則1也適用于此，不過由于其DOM負(fù)極標(biāo)簽的不同，故單拎出來特殊化。
6.:not 偽類例外
:not 否定偽類在優(yōu)先級(jí)計(jì)算中不會(huì)被看作是偽類. 事實(shí)上, 在計(jì)算選擇器數(shù)量時(shí)還是會(huì)把其中的選擇器當(dāng)做普通選擇器進(jìn)行計(jì)數(shù).
div.outer p { color:orange; } div:not(.outer) p { color: lime; }
當(dāng)它被應(yīng)用在下面的HTML時(shí),就是文字描述效果
<div class="outer"> <p>orange</p> <div class="inner"> <p>lime</p> </div> </div>
7.!important 規(guī)則例外
當(dāng)在一個(gè)樣式聲明上使用 !important 規(guī)則時(shí)，該樣式聲明會(huì)覆蓋CSS中任何其他的聲明。
盡管技術(shù)上 !important 與優(yōu)先級(jí)毫無關(guān)系，但是它們之間直接相互影響。
使用 !important 是一個(gè)壞習(xí)慣，應(yīng)該盡量避免，因?yàn)檫@打斷了樣式表中的固有的級(jí)聯(lián)規(guī)則 使得調(diào)試找bug變得更加困難了。
當(dāng)兩條相互沖突的帶有!important 規(guī)則的聲明被應(yīng)用到相同的元素上時(shí)，擁有更大優(yōu)先級(jí)的聲明將會(huì)被采用。
學(xué)習(xí)視頻分享：css視頻教程
