共计 1743 个字符，预计需要花费 5 分钟才能阅读完成。
- 层叠与优先级
当多个选择器抉择了 html 中的同一个元素时，并且定义了抵触的属性，不去写代码验证的状况下，应该怎么确定哪个选择器定义的属性会失效？
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {color: black;}
#title {color: orange;}
.nav {color: red;}
</style>
</head>
<body>
<h1 id="title" class="nav">
Hello World
</h1>
</body>
</html>如果你去验证的话，会发现是 ID 选择器失效了！
当咱们正文掉 ID 选择器时，会发现 class 选择器失效了。从这个例子中能够看到，选择器失效的优先级应该是 ID 选择器 > class 选择器 > 标签选择器
层叠就是如果，多个属性叠加，有些属性可能被笼罩了，哪些属性在下层，就是靠优先级来判断的。
此外，还有一些优先级的准则
例如，!important申明具备更高的优先级，然而如果两个抵触的申明都被申明为 `important 呢？能够利用申明的程序来判断，越晚申明的属性，优先级越高！
教训上来讲
1. 越具体的申明优先级越高：例如，我用多个 ID 选择器确定了一个元素就比单个 ID 选择器确定一个元素要更加具体
2. 越前面的申明优先级越高
3. 行内款式的申明高于内部引入的款式
4. 尽量不要用 ID 选择器和!important
- 继承
如果一个元素没有层叠值，则可能会继承某个先人元素的值，例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {font-family: serif;}
</style>
</head>
<body>
<h1 id="title" class="nav">
Hello World
</h1>
</body>
</html>而后你关上开发者工具，应该会看到这个字段
须要留神的是，不是所有的属性都是能够继承的，个别状况下，跟文本相干的属性会被继承。
1.3 非凡值
1.3.1 inherit
有时，咱们想要用继承代替一个层叠值，这种状况下，能够应用 inherit 关键字。
例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {color:red;}
.nav {color: green;}
.nav a {color: inherit;}
</style>
</head>
<body>
<h1 id="title" class="nav">
<a>Hello World</a>
</h1>
</body>
</html>这时你会看到，字体是绿色而不是红色
1.3.2 initial
应用 initial 关键字能够撤销元素的款式，使元素变成默认款式。
须要留神的是 display: initial 等价于 display: inline 而不是diplay: block
1.4 简写属性
例如：
margin: 0 1 2 3 等价于
margin-top: 0;
margin-right: 1;
margin-bottom: 2;
margin-left: 3;margin: 1 2等价于
margin-top: 1;
margin-right: 2;
margin-bottom: 1;
margin-left: 2;margin: 1 2 3等价于
margin-top: 1;
margin-right: 2;
margin-bottom: 3;
margin-left: 2;也就是说，没有指定的边的值会变成对边的值