这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战
Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端👨🏻💻，如果我写的文章有幸可以得到你的青睐，万分有幸~
这是【从头学前端】系列文章的第二十八篇-《CSS中的继承与层叠》
本系列文章在掘金首发，编写不易转载请获得允许
写在前面
本篇文章将来学习CSS中的层叠与继承的内容，本篇文章中包含了CSS中继承的概念，可以继承的属性，以及关于继承的关键字等内容。
层叠
CSS的中文翻译为层叠样式表 ，所谓的层叠样式就是同样的属性出现在一个元素上，为了解决这种“冲突”的优先级规则，也就是层叠 ，具体的规则如下：
-
具有
important的样式的优先级是最高的。 -
选择器的优先级，具体如下：
-
行内样式
-
id选择器 -
class选择器 -
元素选择器
上述可以概述为“越具体重要”
-
-
源代码的顺序，如果上面一致的话，则最终的样式取决于谁在后面
继承
CSS中的继承指的是当某个属性的值省略 时，其默认的值有可能来源与祖先元素一致，如果是这样的话这个特性就称为继承。
可以继承的属性
CSS中并不是所有的属性都可以继承，如何查看一个属性是否可以继承可以通过MDN查看，如下图展示了color属性是否可以继承。
CSS中的可继承属性数量庞大，具体如下表所示：
| 属性 | 作用 |
|---|---|
font | 组合字体 |
font-family | 规定元素的字体系列 |
font-weight | 设置字体的粗细 |
font-size | 设置字体的尺寸 |
font-style | 定义字体的风格 |
text-indent | 文本缩进 |
text-align | 文本水平对齐 |
line-height | 行高 |
word-spacing | 增加或减少单词间的空白 |
letter-spacing | 增加或减少字符间的空白 |
text-transform | 控制文本大小写 |
direction | 规定文本的书写方向 |
color | 文本颜色 |
visibility | 元素可见性 |
| 一些关于表格的属性 | |
| 一些关于列表的属性 | |
cursor | 设置光标样式的属性 |
上面的表格中展示了一些常用的可以继承的属性。
不可继承属性
不可继承的属性中最典型的就是height和width，如果宽度和高度继承父级就回导致CSS非常的难用。
控制继承的值
CSS中控制继承的值有三个，分别是
-
inherit：该值会继承父级的值。 -
initial：该值如果存在默认样式，则恢复为默认样式，否则与inherit相同。 -
unset：如果属性为继承属性效果与inherit相同，否则与initial相同。
如下代码展示了控制属性的值的用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>控制继承的值</title>
<style>
li {
color: lightskyblue;
}
.my-class-1 a {
color: inherit;
}
.my-class-2 a {
color: initial;
}
.my-class-3 a {
color: unset;
}
</style>
</head>
<body>
<ul>
<li>默认 <a href="#">链接</a> 颜色</li>
<li class="my-class-1">值为 inherit <a href="#">链接</a> 颜色</li>
<li class="my-class-2">值为 initial <a href="#">链接</a> 颜色</li>
<li class="my-class-3">值为 unset <a href="#">链接</a> 颜色</li>
</ul>
</body>
</html>
运行代码如下所示：
{完}
