<div>
<h1 class="title">hello</h1>
</div>
div h1 { color: red; }
.title { color: blue; }
以上代码会让h1显示什么颜色？答案是蓝色。这就涉及到了CSS选择器的优先级（特异度）。
selector-speciality.jpeg
speciality-level.jpeg
属性覆盖：优先级高的属性会把优先级低的属性覆盖。如上述代码，.title的优先级高，所以即使div h1在顺序上是先设置的样式，但是还是被优先级更高的给覆盖了。
使用tip：例如对按钮设置样式的时候，按钮通用的样式可以写在优先级的样式中，然后特定的按钮样式在写在优先级较高的样式中。
!important，最高优先级的属性规则，一般情况下无法被其他样式覆盖。
<div id="demo">hello</div>
#demo { color: blue; }
div {
color: red !important;
}
最终文本显示红色。
但是在优先级较高的样式中使用!important可以覆盖优先级较低的样式的!important。
尽量不要使用!important
Cascading 层叠
设置样式的规则
- 找出匹配到该属性的所有声明
- 根据规则来源，从优先级从低到高
- 浏览器预设
- 用户设置
- 网页样式
- 含
!important的网页样式 - 含
!important的用户设置样式
- 同一来源中，按照特异度排序，越特殊优先级越高
- 特异度一样时，按照样式书写顺序，后面的优先级高
继承
某些属性会自动继承其父元素的计算值
<div>
<p>hello</p>
</div>
div { color: red; }
hello的颜色会变成红色，因为<p>中的设置颜色的样式会从父元素<div>中继承。
