MDN 教程

原文地址 [developer.mozilla.org](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)

理解继承

控制继承

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

inherit

设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".

initial

设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。

unset

将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样

注: 还有一个新的属性, revert， 只有很少的浏览器支持。

重设所有属性值

CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个 (inherit, initial, unset, or revert)。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。

• 注释：属性的重设置可以被子元素继承

理解层叠

优先级

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

1. 千位： 如果声明在 [style](/zh-CN/docs/Web/HTML/Global_attributes#attr-style) 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是 1000。
2. 百位： 选择器中包含 ID 选择器则该位得一分。
3. 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
4. 个位：选择器中包含元素、伪元素选择器则该位得一分。

注: 通用选择器 (*)，组合符 (+, >, ~, ' ')，和否定伪类 (:not) 不会影响优先级。

警告: 在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。