层叠样式表：继承与优先级理解

MDN

Cascade

Stylesheets cascade ——样式表层叠，简单地说CSS规则的顺序很重要。最后的一条规则生效。

有三个因素需要考虑，根据重要性排序如下，前面的更重要：

• 重要程度：根据一定规则由浏览器计算出来的分值，特别注意!important的重要程度（可以用来覆盖所有优先级计算）
• 优先级：有些规则在最后出现，但是却应用了前面的规则。这是因为前面的有更高的优先级 — 它范围更小，因此浏览器就把它选择为元素的样式。 比如 类选择器 的权重大于元素选择器，因此类上定义的属性将覆盖应用于元素上的属性。应用在选中对象上的规则，不会覆盖所有规则，只有相同的属性。
• 资源顺序: 可以理解为后面的规则覆盖前面的规则, 如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。

选择器的优先级浏览器计算方式

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

千位：如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
百位：选择器中包含ID选择器则该位得一分。
十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素、伪元素选择器则该位得一分。

通用选择器 (*)，组合符 (+, >, ~, ‘ ‘)，和否定伪类 (:not) 不会影响优先级。 在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。

具体计算表格例子可以参考MDN

优先级

当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则：

• 一个元素选择器不是很具体 — 会选择页面上该类型的所有元素 — 所以它的优先级就会低一些。
• 一个类选择器稍微具体点 — 它会选择该页面中有特定 class 属性值的元素 — 所以它的优先级就要高一点。

.main-heading {
    color: read;
}
h1 {
    color: blue;
}

<h1 class="main-heading">This is my heading</h1>

此时This is my heading显示为红色，因为main-heading更具体地选择。

继承

继承也需要在上下文中去理解，某些设置在父元素上的css属性是可以被子元素继承的，有些则不能。

• 例如设置一个元素的 color 和 font-family ，每个在里面的元素也都会有相同的属性，除非你直接在元素上设置属性。
• 如果你在一个元素上设置 width 50% ，所有的后代不会是父元素的宽度的50% 。如果这个也可以继承的话，CSS就会很难使用了!
• 哪些属性默认继承，一般是由常识决定的，比如margins, padding, borders，如果能被默认继承，那效果一定很烂。

继承控制

CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。

• inherit 设置该属性会使子元素属性和父元素相同。实际上，就是 “开启继承”.
• initial 设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit。
• unset 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样
• revert 浏览器支持的很少

覆盖 !important 唯一的办法就是另一个 !important 具有 相同优先级 而且顺序靠后，或者更高优先级。