层叠与继承

前言

CSS（Cascading Style Sheets）的全称翻译过来为层叠样式表，我们在做一个项目过程中你会发现一些样式代码没有生效。通常的原因是你创建了两个应用于同一个元素的规则。因此我们需要给他们进行排序来防止发生冲突时我们不知道该使用哪一个规则，这个排序就叫做优先级（specificity）。

这里也有继承的概念，也就是在默认情况下，一些 css 属性继承当前元素的父元素上设置的值，有些则不继承。这也可能导致一些和期望不同的结果。

我们在这里cue到了三个关键词，层叠，继承，优先级；我们将在下文一点点对这三个关键词做解释。

层叠

样式表层叠——简单的说，就是 CSS 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。

下面的示例中，我们有两个关于 <h1> 的规则。<h1> 我们可以看到h1的字体大小为100px，颜色为蓝色；这两个规则来自同一个源，且具有相同的元素选择器，有相同的优先级，所以顺序在最后的生效。

h1 {
  font-size: 100px;
  color: red;
}
h1 {
  color: blue;
}

优先级

浏览器是根据优先级来决定当一个元素被多个选择器设置规则时选择哪个规则。它基本上是一个衡量选择器具体选择哪些属性的尺：

• 一个元素选择器不是很具体，则会选择页面上该类型的所有元素，所以它的优先级就会低一些。
• 一个类选择器稍微具体点，则会选择该页面中有特定 class 属性值的元素，所以它的优先级就要高一点。

eg：下面的 <h1> 最后会显示红色，这是因为类选择器 main-heading 有更高的优先级，因此就会被应用，即使元素选择器顺序在它后面。

.main-heading { 
  color: red; 
}
h1 { 
  color: blue; 
}

继承

继承也需要在上下文中去理解——一些设置在父元素上的 CSS 属性是可以被子元素继承的，有些则不能。

举一个例子，如果你设置一个元素的 color 和 font-family，每个在里面的元素也都会有相同的属性，除非你直接在元素上设置属性。

body {
  color: red;
}
span {
  color: black;
}

那到底什么属性才继承呢？现在可以简单理解成，只要和字体相关的，都会从父元素传给子元素。