在了解CSS的繼承與層疊之前拗小，首先要了解一下html的文檔樹 以及選擇器的特殊性和重要性（!important）蚪拦！
CSS 繼承
子元素將會繼承父元素的css樣式
在DOM樹中肆资，該屬性樣式會傳遞到父節(jié)點的最后一個子節(jié)點 知道沒有節(jié)點為止
比如：
<div>
哈哈 我是父元素
<p>我是子元素</p>
<p>我是子元素</p>
<p>我是子元素</p>
</div>
設(shè)置<p>的CSS樣式
div {
color: red;
}
猜猜會得到什么樣的結(jié)果根吁？锤岸？擦秽？
div以及其中的p標簽內(nèi)的文本都會變成紅色！Ｄ旱摹！
繼承.PNG
Ｌ适怠冻辩！但凡是都有特例，子元素并不是所有的屬性都能夠繼承拆祈，比如大多數(shù)框模型（外邊距恨闪、內(nèi)邊距、背景放坏、邊框）可以自己試著寫一下看看有什么效果··
其中繼承樣式 無特殊性 (連0都沒有）*（通配選擇器的特殊性為0）
要注意沒有特殊性和 特殊性為0還是有很大差別的
舉個例子：
* {
color: brown;
}
#text {
color: blue;
}
</style>
<div id=text>
哈哈 我是父元素
<p>我是子元素</p>
<p>我是子元素</p>
<p>我是子元素</p>
</div>
現(xiàn)在文本的顏色變成了什么樣呢咙咽？？
其實是這樣
特殊性0&無特殊性.PNG
特殊性為0 還是戰(zhàn)勝了 無特殊性Ｓ倌辍钧敞！
CSS 層疊
讓我們想想若兩個規(guī)則的特殊性相同元素的最終樣式會變成什么樣？麸粮？溉苛？
（快想想CSS的中文名稱是什么---）
<style>
p {
color: red;
}
p {
color: yellow;
}
</style>
p的文本顏色到底是什么樣的呢？其實他是黃色的弄诲！
那我們現(xiàn)在來說一下CSS的層疊規(guī)則：
1. 按權(quán)重和來源排序
2. 按特殊性排序
3. 按順序排序
1. 按權(quán)重和來源排序
標志!important的規(guī)則的權(quán)重要高于沒有!important標志的規(guī)則
CSS三種樣式來源：創(chuàng)作人員愚战、讀者和用戶代理 權(quán)重比較
1.讀者的重要聲明 !important
2.創(chuàng)作人員的重要聲明
3.創(chuàng)作人員的正常聲明
4.讀者的正常聲明
5.用戶代理（瀏覽器默認樣式）聲明
2.按特殊性排序
不同類型的選擇器特殊性不同
其中ID選擇器 > 類選擇器 > 標簽選擇器
但是 這些選擇器的屬性若沒有標志!important則會被內(nèi)聯(lián)樣式所覆蓋
比如：
<div id=text style="color:blue"> //為div添加內(nèi)聯(lián)樣式
哈哈 我是父元素
<p>我是子元素</p>
<p>我是子元素</p>
<p>我是子元素</p>
</div>
為其設(shè)置CSS樣式
<style>
div {
color: red;
}
#text {
color: yellow;
}
</style>
結(jié)果 字體變成了藍色！齐遵！
內(nèi)聯(lián)樣式.PNG
3.按照出現(xiàn)順序排序
這一條就不多說了
當兩條規(guī)則的特殊性相同時 最后出現(xiàn)的樣式為準
所以我們通常把主樣式放在最后
