css作為web開(kāi)發(fā)中的重要組成部分樟结，已經(jīng)被運(yùn)用到web前端開(kāi)發(fā)中的方方面面。然而在平時(shí)開(kāi)發(fā)中危队，常常會(huì)在不同的地方為同一個(gè)元素定義了不同的樣式肴沫。有時(shí)候往往會(huì)覺(jué)得聲明的樣式?jīng)]有達(dá)到自己預(yù)期的效果，這時(shí)候就想要探究一下其中的奧秘掉房。
其實(shí)付材，css選擇器中存在著自己的規(guī)則，來(lái)規(guī)范各個(gè)樣式的顯示優(yōu)先級(jí)圃阳，可以成為css的權(quán)重厌衔。
那么如何知道哪個(gè)樣式的優(yōu)先級(jí)更高呢，下面來(lái)介紹下css選擇器的優(yōu)先級(jí)捍岳。
選擇器的優(yōu)先級(jí)可以劃分為0, 0, 0, 0四個(gè)等級(jí)富寿。
其中：
- 內(nèi)聯(lián)元素： 1, 0, 0, 0
- ID選擇器 0, 1, 0, 0
- 類選擇器睬隶，屬性選擇， 偽類 0, 0, 1, 0
- 元素页徐，偽元素 0, 0, 0, 1
下面請(qǐng)看如下樣式：
<div class="text">Google</div>
.text {
color: red; /* 0, 0, 1, 0*/
}
.text {
color: hotpink; /* 0, 0, 1, 0*/
}
Google會(huì)顯示為hotpink,雖然他們的權(quán)重相等搀绣，但是后聲明的樣式會(huì)覆蓋先聲明的樣式飞袋。
若我們把樣式改為如下樣式
div.text {
color: red; /*0, 0, 1, 1*/
}
.text {
color: hotpink; /*0, 0, 1, 0*/
}
由于div.text權(quán)重大于.text的權(quán)重，所以字體會(huì)顯示為紅色
考慮如下樣式：
<div id="parent" class="parent">
工會(huì)
<span class="child">人員</span>
</div>
.parent {
color: red; /*0, 0, 1, 0*/
}
div.parent {
color: skyblue; /*0, 0, 1, 0*/
}
#parent {
color: darkorchid; /*0, 1, 0, 0*/
}
div .child {
color: greenyellow; /*0, 0, 1, 1*/
}
div span {
color: blue; /*0, 0, 0, 2*/
}
.child {
color: orange; /*0, 0, 1, 0*/
}
由圖中的權(quán)重列表可知链患，對(duì)于工會(huì)兩個(gè)文字來(lái)說(shuō)巧鸭，
優(yōu)先級(jí)應(yīng)該是#parent > div.parent > .parent
對(duì)于人員來(lái)說(shuō)，則是div .child > .child > div span
css存在三種樣式：
- 內(nèi)聯(lián)樣式
- 內(nèi)部樣式
- 外部樣式
其中內(nèi)聯(lián)樣式 > 內(nèi)部樣式 > 外部樣式
css中分為三種樣式來(lái)源：
- 創(chuàng)作人員樣式
- 讀者樣式
- 用戶代理樣式
創(chuàng)作人員樣式：即前端開(kāi)發(fā)者開(kāi)發(fā)的樣式
讀者樣式： 即瀏覽頁(yè)面的用戶麻捻，通過(guò)瀏覽器提供的外部api接口纲仍，進(jìn)行修改頁(yè)面的樣式
用戶代理樣式： 即瀏覽器（如Chrome, IE, safari等)定義的默認(rèn)樣式，如鏈接默認(rèn)顯示的藍(lán)色樣式贸毕。
其中創(chuàng)作人員樣式 > 讀者樣式 > 用戶代理樣式
