<div>
<h1 class="title">hello</h1>
</div>
div h1 { color: red; }
.title { color: blue; }
以上代碼會(huì)讓h1顯示什么顏色下梢？答案是藍(lán)色。這就涉及到了CSS選擇器的優(yōu)先級(jí)（特異度）敞咧。
selector-speciality.jpeg
speciality-level.jpeg
屬性覆蓋：優(yōu)先級(jí)高的屬性會(huì)把優(yōu)先級(jí)低的屬性覆蓋。如上述代碼辜腺，.title的優(yōu)先級(jí)高休建，所以即使div h1在順序上是先設(shè)置的樣式乍恐，但是還是被優(yōu)先級(jí)更高的給覆蓋了。
使用tip：例如對(duì)按鈕設(shè)置樣式的時(shí)候测砂，按鈕通用的樣式可以寫在優(yōu)先級(jí)的樣式中茵烈，然后特定的按鈕樣式在寫在優(yōu)先級(jí)較高的樣式中。
!important砌些，最高優(yōu)先級(jí)的屬性規(guī)則瞧毙，一般情況下無(wú)法被其他樣式覆蓋。
<div id="demo">hello</div>
#demo { color: blue; }
div {
color: red !important;
}
最終文本顯示紅色寄症。
但是在優(yōu)先級(jí)較高的樣式中使用!important可以覆蓋優(yōu)先級(jí)較低的樣式的!important宙彪。
盡量不要使用!important
Cascading 層疊
設(shè)置樣式的規(guī)則
- 找出匹配到該屬性的所有聲明
- 根據(jù)規(guī)則來(lái)源，從優(yōu)先級(jí)從低到高
- 瀏覽器預(yù)設(shè)
- 用戶設(shè)置
- 網(wǎng)頁(yè)樣式
- 含
!important的網(wǎng)頁(yè)樣式 - 含
!important的用戶設(shè)置樣式
- 同一來(lái)源中有巧，按照特異度排序释漆，越特殊優(yōu)先級(jí)越高
- 特異度一樣時(shí)，按照樣式書寫順序篮迎，后面的優(yōu)先級(jí)高
繼承
某些屬性會(huì)自動(dòng)繼承其父元素的計(jì)算值
<div>
<p>hello</p>
</div>
div { color: red; }
hello的顏色會(huì)變成紅色男图，因?yàn)?code><p>中的設(shè)置顏色的樣式會(huì)從父元素<div>中繼承。
