層疊
CSS中通過層疊的機制來處理多個規(guī)則同時作用于一個元素的情況购桑。這是一個非常重要的概念群嗤，通過CSS（層疊樣式表）的名字就可以得知讼昆。
層疊的機制： 為不同的規(guī)則賦予不同的重要性。
這就像是生活中，領導給你分配任務浸赫，領導說：“小豬，你去給我倒杯水赃绊〖认浚” 接著又說：“小豬，你給我拿點吃的碧查≡烁遥” 你還沒走呢，領導又說：“小豬忠售，來給我按按摩传惠。” 小豬沒有修過分身術稻扬，只能一件一件地做卦方，從哪一個開始呢？ 那就看哪件事情最重要啦泰佳，不然要被領導炒魷魚了盼砍，肯定給領導按按摩最重要啦是不是。
CSS的層疊規(guī)則
- 找到匹配特定元素的所有規(guī)則
- 按照顯示權重排序應用到特定元素上的所有規(guī)則聲明逝她。以!important標記的規(guī)則比沒有!important標記的規(guī)則的權重高浇坐。
- 按照來源排序應用到特定元素上的所有聲明。聲明有三個來源：開發(fā)者黔宛、用戶和用戶代理（瀏覽器）近刘。正常情況下，開發(fā)者編寫的樣式擊敗用戶編寫的樣式臀晃；用戶樣式中用!important標記的樣式比其他樣式權重高觉渴，包括開發(fā)者樣式中以!important標記的樣式；開發(fā)者樣式表和用戶樣式表中的規(guī)則聲明都會覆蓋用戶代理的默認樣式积仗。
- 按照特殊性排序應用到特定元素上的所有聲明疆拘。特殊性高的樣式具有較高的權重。
- 按聲明的前后位置排序應用到特定元素上的所有樣式寂曹。樣式表或文檔中靠后的聲明權重較高哎迄。導入的樣式表中的聲明放在當前樣式表中所有聲明的前面。（因為隆圆，@import url(...)的位置就在style標簽內的所有規(guī)則之前漱挚。）
規(guī)則的權重
最重要的規(guī)則是作者樣式表，即開發(fā)者所寫的樣式渺氧。再次是用戶樣式表旨涝，用戶可以通過瀏覽器的設置選項，為網(wǎng)頁應用自己的樣式侣背。排在最后的是瀏覽器（或用戶代碼）的默認樣式白华，但一般會被作者樣式表所覆蓋慨默。為了給用戶更高的優(yōu)先權，CSS允許用戶使用!important覆蓋任何規(guī)則弧腥，包括作者使用!important的樣式厦取。
**畢竟，咱們作者只是下等搬磚的管搪，用戶才是上帝 : ) **
層疊機制的重要性級別從高到低為：
- 用戶!important設置的樣式
- 作者使用!important設置的樣式
- 作者樣式表
- 用戶樣式表
- 瀏覽器（或用戶代碼）默認樣式表
在這些級別的基礎上虾攻，規(guī)則再按照規(guī)則的特殊性或者說是重要性排序。
概括CSS樣式匹配
首先找到匹配特定元素的所有樣式聲明更鲁，先按照權重和來源進行排序霎箍，排序之后的樣式如果存在沖突（即，多個規(guī)則的權重和來源相同）澡为，則根據(jù)各個規(guī)則的特殊性來選擇應用的樣式漂坏。若是多個規(guī)則的權重、來源以及特殊性均相同缀壤，則根據(jù)這些規(guī)則在樣式表中的先后順序來選擇應用的樣式樊拓。
特殊性（重要性）
為了量化規(guī)則的特殊性，每種標識符都對應著一個數(shù)值塘慕。那么筋夏，一條規(guī)則的特殊性就是其每個選擇符的累加數(shù)值。
任何選擇符的特殊性都對應著4個值：a , b , c , d
- 對于行內樣式 a = 1
- b 為 ID選擇符的個數(shù)
- c 為類選擇符图呢，偽類選擇符 以及屬性選擇符的個數(shù)
- d 為元素選擇符 条篷， 偽元素選擇符的數(shù)目
下面是一個例子
| 選擇符 | 特殊性 |
|---|---|
| style = "" | 1,0,0,0 |
| *#a #b {} | 0,2,0,0 |
| *#a .b{} | 0,1,1,0 |
| div#a{} | 0,1,0,1 |
| *#a {} | 0,1,0,0 |
| p.a .b{} | 0,0,2,1 |
| p.a {} | 0,0,1,1 |
| div p {} | 0,0,0,2 |
| p{} | 0,0,0,1 |
雖然當選擇符的數(shù)量不超過10個時，也可以用十進制表示特殊性蛤织，但是小豬哥還是不建議使用十進制赴叹，因為以上的方式非常容易看出來不同規(guī)則的特殊性大小。（1指蚜，0乞巧，0，0 肯定大于 0摊鸡，2绽媒，2，2）
比較特殊性的值的大小方法：a,b,c,d 四個值免猾，對于最前面的值大的是辕，后面就不需要比較了，比如 1猎提，0获三，0，0 和0，2疙教，2棺聊，2 因為第一位a的值中1,0,0,0比0，2贞谓，2躺屁，2大，所以第一個的特殊性大（1经宏，0，0驯击，0）烁兰。從第一位a開始比較，若值相同徊都，則繼續(xù)找下一位b的值進行比較沪斟，以此類推。
總的來說暇矫，如果樣式是寫在元素的style屬性里的主之，那么這些樣式的特殊性最高。其次李根，是通過ID選擇符應用的樣式的特殊性高于不使用ID選擇符的槽奕。類選擇符同理。如果特殊性相等房轿，則由應用后定義的規(guī)則粤攒。
（內聯(lián)式樣式 > ID選擇符樣式 > 類選擇符樣式 > 外部文件中設置的樣式）
好了，我們來練習一下囱持！
<div id = "Div">
<h1>hello</h1>
<div id = "childDiv">aovbais</div>
<div>auioabsiahsfo</div>
<div>lohvwoie</div>
</div>
//CSS
#childDiv
{
background:black;
color:white;
}
#Div #childDiv
{
background:orange;
color:blue;
}
最終的id 為 childDiv 的div 樣式會是怎樣的呢夯接？
我們通過上面的層疊樣式表來確定特殊性的值的大小。
- 選擇器#childDiv 的特殊性值為 0,1,0,0
- 選擇器 #Div #childDiv 的特殊性值為： 0,2,0,0 這是因為該規(guī)則使用了兩個ID選擇符
繼承
繼承纷妆，很好理解盔几，就像我們的社會中的一樣，元素從父元素或者是祖元素得到和它們相同的屬性掩幢。
一些屬性逊拍，會被應用他們的元素的后代繼承。比如粒蜈，我們設置body的顏色為紅色顺献，那么body所有后代的顏色都會繼承這個顏色。
body
{
color:orange;
}
<ul id = "nav">
<li><a href="#">Home</a></li>
<li>Servies</li>
<ul>
<li>Design</li>
<li>Development</li>
</ul>
<li>Contact us</li>
</ul>
結果是字體全為橙色枯怖。但并不是所有的情況下都是這樣的注整，假如我們給body元素設置一個字號，但是body內部的標題的字體不會發(fā)生變化。
body{
font-size:2em;
}
<h1>Hello,welcome to my blog!</h1>
<ul id = "nav">
<li><a href="#">Home</a></li>
<li>Servies</li>
<ul>
<li>Design</li>
<li>Development</li>
</ul>
<li>Contact us</li>
</ul>
結果是body樣式中的字體大小font-size是無用的肿轨。
這是因為寿冕，有些標簽的默認樣式是由瀏覽器默認樣式表設置的。這還是前面說的特殊性的問題椒袍。
繼承來的屬性值沒有任何特殊性驼唱，甚至連0都不是，因此即使是特殊性為0的通用選擇符設置的樣式也會覆蓋元素繼承來的樣式驹暑。
*
{
color:orange;
}
ul
{
color:purple;
}
<h1>Hello,welcome to my blog!</h1>
<ul id = "nav">
<li><a href="#">Home</a></li>
<li>Servies</li>
<ul>
<li>Design</li>
<li>Development</li>
</ul>
<li>Contact us</li>
</ul>
當在網(wǎng)頁中打開時玫恳，我們會發(fā)現(xiàn)，頁面中所有的字體的顏色都是橙色优俘。但我們的CSS中京办，把UL中的所有字體都設置成了紫色啊帆焕！
我們的文字是在 li 標簽里面的惭婿，li標簽是ul標簽的子節(jié)點，因此li標簽會繼承紫色叶雹，但是我們又通過通用選擇符來給所有的元素設置文本顏色為橙色财饥。這個時候就要看樣式的特殊性了，由于繼承來的樣式的特殊性連0都算不上折晦，而通用選擇符的特殊性為0钥星，因此頁面中的字體顏色顯示為橙色。
