【深入理解CSS】层叠、优先级、继承

层叠

CSS本质上就是声明规则，即在各种条件下，我们希望产生特定的效果。浏览器会根据这些规则，判断每个规则应该用在哪里，并使用他们去渲染界面。
故学习CSS，我们首先需要理解浏览器如何解析样式规则，尤其是当两条规则提供了冲突的样式时会发生什么，就需要理解层叠。
当多条规则尝试给元素设置不同样式时，浏览器会为了解决这个问题遵循一系列规则，这个规则就是层叠。

1. 样式表的来源。作者样式表 > 用户代理样式表（浏览器默认样式）。行内样式 > 內联样式 > 外联样式。
2. 选择器优先级。ID选择器 > 类选择器 > 标签选择器。
   如：
   1个ID选择器 先于 2个类选择器 先于 1个类选择器+3个标签选择器 先于 4个标签选择器。
   用数值形式表示就是(1,0,0) > (0,2,0) > (0,1,3) > (0,0,4)
   
3. 源码顺序。如果两个声明的来源和优先级相同，其中一个声明出现的较晚，则该声明胜出。

!importan声明
样式规则有一个例外，若时在声明的后面，分号的前面加上！important，则该声明会被标记为重要的声明，直接被当作最高优先级来源。

链接样式
顺序记忆口诀：LoVe/HAte，即link，visited，hover，active。

两条经验法则

1. 不要使用ID选择器。就算只用一个ID选择器，也会大幅度提高优先级。
2. 不要使用!important。它比ID选择器更难覆盖。

继承

如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值。
继承属性会顺序传递给后代元素，知道它被层叠值覆盖。
善用开发者工具，在浏览器中打开F12。能清晰的看见哪些元素用了哪些样式规则。

inherit关键字
有时，我们想用继承值代替一个层叠值，可以用inherit关键字，这样元素就会继承其父元素的值。

a:link {
 color: blue;
} 

.footer {
 color: #666;
 background-color: #ccc;
 padding: 15px 0;
 text-align: center;
 font-size: 14px;
} 

.footer a {
 color: inherit;
 text-decoration: underline;
}

我们还可以使用inherit关键字强制继承一个通常不会被继承的属性，比如边框和内边距。

initial关键字
可以使用initial关键词撤销作用于某个元素的样式，将其重制为默认值。
⚠️注意：

1. inline时display属性的默认值。
2. 简写属性也会默默覆盖其他未定义的样式为默认值。

简写值的顺序
💡上右下左
如margin、padding，还有为元素4条边分别指定值的边框属性时，可以记忆口诀TRouBLe。
当指定值缺失时，缺失的值和它相对的值相等。
如若是只指定了两个值，则第一个值表示上下，第二个值表示左右。
若是只指定了三个值，则第一个值表示上，第二个值表示左右，第三个值表示下。
💡水平垂直
还有一些属性没有四个方向的值，最多指定两个方向，包括box-shabow、background-position等，第一个值表示水平位移，第二个值表示垂直位移。