CSSTDG读书笔记四
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的优先权这里又整理了一篇比较系统的。


