web.Frontend

Chapter 3. Structure and the Cascade

specificity表示了一个样式使用时的优先级
CSS2用3位表示一个样式的specificity
CSS2.1用4位
四条规则：
每个ID选择符，加 0,1,0,0
每个class选择符，每个属性选择符，或者每个伪类，加0,0,1,0
每个元素和伪元素，加0,0,0,1
其他选择符包括全局选择符*都没有加成效果，但它们有specificity，0,0,0,0
一些例子：

h1 {color: red;} /* 0,0,0,1 */
body h1 {color: green;} /* 0,0,0,2 (winner)*/

h2.grape {color: purple;} /* 0,0,1,1 (winner) */
h2 {color: silver;} /* 0,0,0,1 */

html > body table tr[id=”totals”] td ul > li {color: maroon;} /* 0,0,1,7 */
li#answer {color: navy;} /* 0,1,0,1 (winner) */

文内的样式specificity为1,0,0,0 始终高于外部定义
特别的，如果一个样式特别重要，可使用!important，它优先于所有其他specificity。
如果!important也发生了冲突，则参考specificity的比较结果，如果specificity冲突则按先后顺序。

关于继承Inheritance
body的background样式可以向上传递给html元素，这是继承的一个例外。
绝大多数盒模型相关属性都不继承，比如margin,padding,background,border等

继承bug
table不继承某些样式？
关于继承bug具体还不是很清楚。

继承没有specificity，所以继承的优先级低于比如甚至全局选择符的优先级

层叠Cascade
import进来的样式表优先级低，因为import出现在最前面

关于CSS的优先权这里又整理了一篇比较系统的。