最近學(xué)習(xí)了css權(quán)威指南這本書，大多基于css2和css2.1的介紹。
總結(jié)一些層疊樣式相關(guān)的知識(shí)和習(xí)題，供自測(cè)。

• 特殊性
  所有樣式?jīng)_突的解決都由層疊來處理
  下面是特殊性如何計(jì)算

特殊性計(jì)算.png

另外：結(jié)合符和通配符等選擇器對(duì)特殊性無影響

題目如下：
例：h1 { color : "red" } ; （0，0，0，1）
{}下面題中大括號(hào)內(nèi)的內(nèi)容就省略了，和特殊性沒有太大影響

1. body h1 { ... }
2. h2.grape { ... }
3. html>body table tr[id="totals"] td ul>li { ... }
4. li #answer { ... }
5. p em { ... }
6. *.light { ... }
7. p.bright em.dark { ... }
8. #id216 { ... }
9. div#sidebar *[href]{ ... }
10. h1+p { ... }

答案：

1. 0，0，0，2
2. 0，0，1，1
3. 0，0，1，7
4. 0，1，0，1
5. 0，0，0，2
6. 0，0，1，0
7. 0，0，2，2
8. 0，1，0，0
9. 0，1，1，1
10. 0，0，0，2

• 層疊
  層疊的規(guī)范

1. 找出所有相關(guān)的規(guī)則，這些規(guī)則都包含一個(gè)給定元素匹配的選擇器
   2.按顯式權(quán)重對(duì)應(yīng)用到該元素的所有聲明排序。標(biāo)志！important 的規(guī)則權(quán)重高于沒有！important標(biāo)志的規(guī)則。
   按來源對(duì)應(yīng)用到給定元素的所有聲明排序。共有三種：創(chuàng)作人員、讀者和用戶代理。
   正常情況下：創(chuàng)作人員的樣式要?jiǎng)龠^讀者樣式。
   有！important標(biāo)志的讀者樣式要強(qiáng)于所有其他樣式，這包括有！important標(biāo)志的創(chuàng)作人員樣式。
   創(chuàng)作人員樣式和讀者樣式都比用戶嗲里的默認(rèn)樣式要強(qiáng)

正常：創(chuàng)作人員 > 讀者 > 用戶代理
有！important情況下：讀者 > 創(chuàng)作人員 > 用戶代理

3.按特殊性對(duì)應(yīng)用到給定元素的所有聲明排序。有較高特殊性的元素權(quán)重要大于有較低特殊性的元素
4.按出現(xiàn)順序?qū)?yīng)用到給定元素的所有聲明排序。一個(gè)聲明在樣式表或文檔中越后出現(xiàn)，它的權(quán)重就越大。如果樣式表中有倒入的樣式表，一般認(rèn)為出現(xiàn)在導(dǎo)入樣式表中的聲明在前，主樣式表中的所有聲明在后。

題目：以下樣式會(huì)顯示哪個(gè)

1. p{ color : gray !important ; }
   <p style = " color : black " >XX</p>
2. p em { color : black ; } / * author's style sheet * /
   p em { color : yellow ; } / * reader's style sheet * /
3. p em { color : black !important ; } / * author's style sheet * /
   p em { color : yellow !important ; } / * reader's style sheet * /
4. p#bright { color : silver ;}
   p { color: black ; }
   <p id = "bright " >XXXXXX</p>
5. h1 { color : red }
   h1 { color : black }
6. p em{ color : purple } /* from import style sheet/
   p em{ color :grad } / rule contained within the document */

答案：

1. 1
2. 1
3. 2
4. 1
5. 2
6. 2