层叠和继承

<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 层叠
设置样式的规则

1. 找出匹配到该属性的所有声明
2. 根据规则来源，从优先级从低到高

• 浏览器预设
• 用户设置
• 网页样式
• 含!important的网页样式
• 含!important的用户设置样式

3. 同一来源中，按照特异度排序，越特殊优先级越高
4. 特异度一样时，按照样式书写顺序，后面的优先级高

---

继承
某些属性会自动继承其父元素的计算值

<div>
  <p>hello</p>
</div>
div { color: red; }

hello的颜色会变成红色，因为<p>中的设置颜色的样式会从父元素<div>中继承。