最近學習了css權威指南這本書，大多基于css2和css2.1的介紹。
總結一些層疊樣式相關的知識和習題，供自測。

• 特殊性
  所有樣式沖突的解決都由層疊來處理
  下面是特殊性如何計算

特殊性計算.png

另外：結合符和通配符等選擇器對特殊性無影響

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

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ī)則，這些規(guī)則都包含一個給定元素匹配的選擇器
   2.按顯式權重對應用到該元素的所有聲明排序。標志！important 的規(guī)則權重高于沒有！important標志的規(guī)則。
   按來源對應用到給定元素的所有聲明排序。共有三種：創(chuàng)作人員、讀者和用戶代理。
   正常情況下：創(chuàng)作人員的樣式要勝過讀者樣式。
   有！important標志的讀者樣式要強于所有其他樣式，這包括有！important標志的創(chuàng)作人員樣式。
   創(chuàng)作人員樣式和讀者樣式都比用戶嗲里的默認樣式要強

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

3.按特殊性對應用到給定元素的所有聲明排序。有較高特殊性的元素權重要大于有較低特殊性的元素
4.按出現(xiàn)順序對應用到給定元素的所有聲明排序。一個聲明在樣式表或文檔中越后出現(xiàn)，它的權重就越大。如果樣式表中有倒入的樣式表，一般認為出現(xiàn)在導入樣式表中的聲明在前，主樣式表中的所有聲明在后。

題目：以下樣式會顯示哪個

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