最近学习了css权威指南这本书，大多基于css2和css2.1的介绍。
总结一些层叠样式相关的知识和习题，供自测。
- 特殊性
所有样式冲突的解决都由层叠来处理
下面是特殊性如何计算
特殊性计算.png
另外：结合符和通配符等选择器对特殊性无影响
题目如下：
例：h1 { color : "red" } ; （0，0，0，1）
{}下面题中大括号内的内容就省略了，和特殊性没有太大影响
- body h1 { ... }
- h2.grape { ... }
- html>body table tr[id="totals"] td ul>li { ... }
- li #answer { ... }
- p em { ... }
- *.light { ... }
- p.bright em.dark { ... }
- #id216 { ... }
- div#sidebar *[href]{ ... }
- h1+p { ... }
答案：
- 0，0，0，2
- 0，0，1，1
- 0，0，1，7
- 0，1，0，1
- 0，0，0，2
- 0，0，1，0
- 0，0，2，2
- 0，1，0，0
- 0，1，1，1
- 0，0，0，2
- 层叠
层叠的规范
- 找出所有相关的规则，这些规则都包含一个给定元素匹配的选择器
2.按显式权重对应用到该元素的所有声明排序。标志！important 的规则权重高于没有！important标志的规则。
按来源对应用到给定元素的所有声明排序。共有三种：创作人员、读者和用户代理。
正常情况下：创作人员的样式要胜过读者样式。
有！important标志的读者样式要强于所有其他样式，这包括有！important标志的创作人员样式。
创作人员样式和读者样式都比用户嗲里的默认样式要强
正常：创作人员 > 读者 > 用户代理
有！important情况下：读者 > 创作人员 > 用户代理
3.按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素
4.按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现，它的权重就越大。如果样式表中有倒入的样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后。
题目：以下样式会显示哪个
- p{ color : gray !important ; }
<p style = " color : black " >XX</p> - p em { color : black ; } / * author's style sheet * /
p em { color : yellow ; } / * reader's style sheet * / - p em { color : black !important ; } / * author's style sheet * /
p em { color : yellow !important ; } / * reader's style sheet * / - p#bright { color : silver ;}
p { color: black ; }
<p id = "bright " >XXXXXX</p> - h1 { color : red }
h1 { color : black } - p em{ color : purple } /* from import style sheet/
p em{ color :grad } / rule contained within the document */
答案：
- 1
- 1
- 2
- 1
- 2
- 2
