CSS笔记——层叠样式的优先性

目的：解决声明冲突，由浏览器自动处理（权重计算）。

三个步骤

重要性比较（优先级递减）

1. 作者样式表的 !important
   （作者样式表：开发者书写的CSS样式）
   学了后面的特殊性的优先级计算就会发现，这里若没有!important，Lorem第一行显示颜色的应该是aliceblue；而在选择器的属性值后空格再加上!important，该属性值成为最优先，此时显示颜色为aquamarine。
2. 作者的普通样式
3. 浏览器默认样式表的样式

特殊性比较

选择器选中的范围越窄，越特殊，就越优先。
具体：通过选择器计算出一个四位数（256进制）。

计算方法如下：

1. 内联的有无（0/1）；
2. id选择器的数量；
3. 类选择器、属性选择器、伪类选择器的数量；
4. 选择器中所有元素选择器、伪元素选择器的数量。

/*下面的样式按上述方法计算得0211*/
/*:link是伪类选择器*/
#mydiv #myul a:link{
color: red;
}

源代码次序

后书写的覆盖前面的。

应用

1. 重置样式：覆盖浏览器默认样式
   常见重置样式表（网上有资源）：reset.css、meyer.css、normalized.css
2. love-hate法则
   link<visited<hover<active
   从左到右优先级升高