特指度和层叠

[xiongshj]

特指度和层叠

这是学习《CSS 权威指南》第 3 章的笔记。

继承（inheritance）是指把一个元素的某些属性值传给其后代的机制。确定应该把哪些值应用到元素上时，用户代理不仅要考虑继承，还要考虑声明的特指度（specificity），以及声明的来源。这个过程称为层叠。

不管怎样，无论问题看上去多抽象、多难懂，都要不断努力！努力终有回报。

特指度

选择符的特指度由选择符本身的组成部分决定。一个特指度值由四部分构成，例如 0,0,0,0。选择符的特指度通过下述规则确定：

• 选择符中的每个 ID 属性值加 0,1,0,0。
• 选择符中的每个类属性值、属性选择或伪类加 0,0,1,0。
• 选择符中的每个元素和伪元素加 0,0,0,1。
• 连结符和通用选择符不增加特指度。

特指度值是从左向右比较的。特指度 1,0,0,0 比所有以 0 开头的特指度都大，不管后面的数有多大。

行内声明的特指度为 1,0,0,0。

有时某个声明可能非常重要，超过其他所有声明。CSS 称之为重要声明（important declaration）。这种重要声明末尾的分号之前插入 !important。

p.dark {
  color: #333 !important;
  background: white;
}

如果想把两个声明都标记为重要的，每个声明中都要插入 !important。

p.dark {
  color: #333 !important;
  background: white !important;
}

带有 !important 的声明对特指度没有影响，但是会与不重要的声明分开处理。

继承

继承指某些样式不仅应用到所指的元素上，还应用到元素的后代上。

继承的值没有特指度，连零都没有。

零特指度战胜无特指度。

层叠

先按权重和来源排序，再按特指度排序，最后是按前后位置排序。

正是因为前后位置有影响，所以通常才推荐按照一定的顺序编写链接的样式。链接样式的推荐顺序是“link-visited-focus-hover-active”（LVFHA），如下所示：

a:link {color: blue;}
a:visited {color: purple;}
a:focus {color: green;}
a:hover {color: red;}
a:active {color: orange;}

小结

本章内容简单易懂。