大家都知道CSS的全称叫做“Cascading Style Sheets”，但是恐怕很多人不知道“Cascading”这个词的含义。 其实，“层叠”指的是样式的覆盖。 当一个元素使用多种样式并且出现同名的样式属性时，浏览器必须从中选择一个属性值。 这个过程称为“级联”。 样式覆盖（这种别名比较流行）遵循一定的规则。 之前我对这个规则还隐隐约约的了解，直到这几天读了《CSS：缺失的手册》，才恍然大悟。 下面是我的一些学习笔记。
首先需要明确的是，很多情况会导致一个元素使用多种样式，样式覆盖的规则也需要根据不同的情况来确定。 具体规则如下。
规则1：当由于继承而发生样式冲突时，最近的祖先会失败。
CSS 的继承机制使元素能够从其包含的祖先元素继承样式。 考虑以下情况：
<pre class="brush:css;toolbar:false">
body
{color:black;}
p
{color:blue;}
welcome
to gaodayue的网络日志
Strong分别继承了body和p的颜色属性，但由于p在继承树中更接近strongelementui样式规则，所以strong中的文本最终继承了p的红色。
规则2：当继承的样式与直接指定的样式冲突时，直接指定的样式失败。
在前面的反例中，如果还指定了强元素的样式，如：
strong
{color:red;}
然后根据第二条规则，strong中的文字最终显示为白色。
规则3：当直接指定的样式发生冲突时，样式残差最高的为输。
样式的残差取决于样式的选择器，权重定义如下表。
CSS 选择器残差
标签选择器
类选择器
10
ID选择器
100
内联样式
1000
伪元素（：第一个子元素等）
伪类（：链接等）
10
可以看到，内联样式>>ID选择器>>类选择器>>标签选择器的残差，另外，后代选择器的残差是各个残差之和，比如“#nav .current a ”有残差为 100 + 10 + 1 = 111。
规则4：当风格残差相同时，后者获胜。
考虑以下情况
Written by Jean Graine de Pomme
.byline
a {color:red;}
p
.email {color:blue;}
“.byline a”和“p .email”都直接指定了前面的a元素，残差都是11。根据规则4，最终显示为红色。
由于样式表可以是外部样式表，也可以是内部样式表，因此规则4提醒我们要注意外部样式表导入的顺序（以及元素的顺序），以及外部样式表和内部样式表的出现位置。 一般来说，内部样式表出现在所有外部样式表导入之后并且通常之前。
规则 5：!important 的样式属性不会被覆盖。
!important 可以算是万不得已时打破上述四个规则的“金手指”。 如果必须使用某种样式属性并且不让它被覆盖elementui样式规则，可以在属性值后添加!important，以规则4的计数器示例为例，“.byline a {color:red !important;}”即可强制链接显示为蓝色。 大多数情况下，样式覆盖可以通过其他方法来控制，并且 !important 不能被滥用。
