下面我们了解一下 CSS 样式的两个特性，一个是继承，一个是覆盖。

之前我们在 body 元素上设置了字体，行高，还有文字的颜色，你会发现这些样式都应用到了 body 的子元素里面了，这就是样式的继承这个特性，也就是元素可以从它的父辈那里继承一些样式，像 font-family，line-height，还有 color，这些样式都是可以被继承的样式。但是要注意的是，并不是所有的样式都会被继承。

检查一下段落文字，然后打开计算样式，这里会显示这个元素真实使用的样式，可以观察一下它的 color，font-family 还有line-height ，这些都是从它的父辈那里继承过来的样式。

覆盖

元素从它的父辈那里继承了一些样式，这些样式会被优先级更高的样式覆盖掉。CSS 制定了一套样式的应用规则，谁的优先级更高主要看定义样式的时候，样式的选择器是怎么写的。暂时我们只需要先知道，样式是可以被覆盖掉的。

比如我们在 body 元素上设置的 font-weight 还有 font-size，这两个样式只影响了段落文字，标题文字没有受影响，这是因为它们被优先级更高的样式覆盖掉了。

虽然我们现在没有设置其它的样式，但是浏览器本身也会给元素添加一些默认的样式。可以检查一下页面上的这个标题元素，你会发现，有一块来自用户代理的样式，样式选择器是 h1，这也是一个标签选择器，这块样式里设置了 font-size 还有 font-weight。

再看一下我们自己定义的选择器是 body 的这块样式，其中 font-weight 还有 font-size 被划去了，说明这两条样式被其它的样式给覆盖掉了。也就是被上面的选择器是 h1 的这块样式里的 font-weight 还有 font-size 覆盖掉了。

因为相比 body 这个样式选择器，对于这个标题元素来说，用 h1 这个标签选择器的优先级更高，因为这个标签更准确，或者说更具体一些。

如果我们想覆盖这块样式，可以用优先级更高的样式选择器定义一块样式。比如在这个样式表里，用 h1 这个标签选择器定义一块样式，在里面用 font-weight 设置一下字体的粗细，设置成 300。

然后在浏览器再观察一下这个标题元素，现在这个元素的 font-weight 这个样式的值就会是 300，覆盖掉了来自用户代理样式表里给 h1 定义的 font-weight 这个样式。说明我们自己定义的样式的优先级比浏览器默认的样式的优先级更高一些。

在这个样式表里，我们在这块样式的下面，再用 h1 标签选择器定义一块样式，同样设置一下 font-weight ，把它的值设置成 400。在浏览器观察一下这个标题元素，现在这个标题元素使用的 font-weight 样式的值是 400。这是因为同等优先级的样式，在后面定义的样式可以覆盖掉前面的样式，所以样式的顺序也很重要。