# CSS继承和优先级
# 1、优先级
资源顺序：当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：
- 一个元素选择器不是很具体，则会选择页面上该类型的所有元素，所以它的优先级就会低一些。
- 一个类选择器稍微具体点，则会选择该页面中有特定
class属性值的元素，所以它的优先级就要高一点。
优先级没什么好说的， 大概理解 id选择器 > 类选择器 > 元素选择器 就行了。各种根据什么权重判断的，意义反倒不是很大了。
# 来源和层叠
有三种层叠来源类型：用户代理样式表、用户样式表和作者样式表。浏览器根据来源和重要性将每个声明分为六个来源分组。有八个优先权级别：六个来源分组、正在过渡的属性和正在动画的属性。优先权的顺序是从具有最低优先权的普通用户代理样式，到当前应用的动画中的样式，到具有最高优先权的重要用户代理样式，再到正在过渡的样式：
- 用户代理普通样式
- 用户普通样式
- 作者普通样式
- 正在动画的样式
- 作者重要样式
- 用户重要样式
- 用户代理重要样式
- 正在过渡的样式
“用户代理”指的是浏览器。“用户”指的是是网站访问者。“作者”指的是你，开发者。用<style> 元素直接在元素上声明的样式是作者样式。不包括动画和过渡样式，用户代理普通样式具有最低优先权；用户代理重要样式具有最高优先权。
对于每个属性，“获胜”的声明是来自基于权重（普通或重要）具有优先权的来源的声明。暂时忽略层，来自具有最高优先权的来源的值将被应用。如果获胜来源对于一个元素有多个属性声明，那么将比较这些竞争属性值的选择器的优先级。不同来源之间的选择器从不比较优先级。
<style>
/* @layer layer2, layer1; 如果一开始就这么声明的话 later1的优先级更高 但是也会比未封层的样式优先级低*/
@layer layer2, layer1;
/* 后声明的层优先级更高 */
@layer layer1 {
.my-title {
color: red;
text-decoration: underline;
}
}
@layer layer2 {
h1 {
color: green;
}
}
/* 未分层样式的隐含层总是在最后的, 所以下面优先级最高 */
h1 {
color: yellow;
}
@layer layer2 {
h1 {
font-style: italic;
}
}
</style>
<h1 class="my-title">hello world</h1>
# 2、继承概念
继承也需要在上下文中去理解——一些设置在父元素上的 CSS 属性是可以被子元素继承的，有些则不能。
举一个例子，如果你设置一个元素的 color 和 font-family，每个在里面的元素也都会有相同的属性，除非你直接在元素上设置属性。
一些属性是不能继承的——举个例子如果你在一个元素上设置 width 为 50% ，所有的后代不会Ï是父元素的宽度的 50% 。如果这个也可以继承的话，CSS 就会很难使用了！
个人理解，一些可能造成布局回流的属性是不会被继承的，只造成重绘的属性大概率可以继承，并不绝对。
# 3、控制继承
CSS 为控制继承提供了五个特殊的通用属性值。每个 CSS 属性都接收这些值。
inherit
设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。
initial
将应用于选定元素的属性值设置为该属性的初始值。
revert (en-US)
将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。
revert-layer (en-US)
将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
unset
将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial
在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用 body 中或者一个父元素中定义的字体，你需要向你的 CSS 中加入这条规则。
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
}
# 4、重设所有属性值
CSS 的简写属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个（inherit、initial、unset 或 revert）。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。
<style>
.box {
color: red;
font-size: 20px;
}
.box2 {
all: unset;
color: green;
}
</style>
<div class="box">i am the first box</div>
<div class="box box2">i am the second box</div>
.box2的颜色最终应该是绿色， 而且字体打下也被重置了