CSS层叠

声明冲突：同一个样式，多次应用到同一个元素

层叠：解决声明冲突，浏览器自动处理（权重计算）

1.比较重要性

重要性从高到低：

1）作者样式表中的important

2）作者样式表中的普通样式

3）浏览器默认样式表中的样式

/**例如修改a元素,则颜色为红色 */
a {
  color: red !important;
}

a {
   color: green;
}

2.比较特殊性

总体规则：看选择器（选择器选中的范围越窄越特殊）

具体规则：通过选择器，计算出一个四位数 (XXXX),谁大谁生效

1. 千位:如果是内联样式，计1，否则计0
2. 百位:选择器中所有ID选择器的数量
3. 十位:选择器中所有类选择器、属性选择器、伪类选择器的数量
4. 个位:选择器中所有元素选择器、伪元素选择器数量

非逢10进一，逢256进1，所以可能出现 0 12 1 0的情况，这种情况只需对比对应位置的大小即可。

/** 0110 */
#app .selected {
  color: red;
}
/** 0110 */
#app .selected:hover {
  color: green
}
/** 0101 */
#app .selected::after {
  content: 'example'
}

3.比较源次序

代码书写靠后的胜出

应用

1. 重置样式表

   书写一些作者样式，覆盖浏览器的默认样式

   重置样式表 -> 浏览器的默认样式

   常见的重置样式表：normalize.css、reset.css、meyer.css

CSS继承

子元素会继承父元素的某些CSS属性

通常，跟文字内容相关的属性都能被继承