- 层叠与优先级
当多个选择器抉择了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;也就是说，没有指定的边的值会变成对边的值