<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color: #008c8c;
}
</style>
</head>
<body>
<div>
<a href="">一个网址</a>
<p>p元素</p>
</div>
</body>
</html>
结果如下
为什么p元素的颜色继承，而a元素的颜色不继承呢？
由属性值的计算过程
- 确定声明值：参考样式表中没有冲突的声明，作为CSS属性值
- 层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值
- 使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
- 使用默认值：对仍然没有值的属性，使用默认值
因为p元素没有关于颜色的声明值，所以它继承了父元素的值
而a元素有默认的关于颜色的声明值，所以它不能继承父元素的值
那么怎样让a元素继承父元素的颜色的值呢？
这里我们引进一个特殊的CSS取值 inherit
inherit：手动（强制）继承，将父元素的值取出应用到该元素
a{
color: inherit;
}
效果如下
计算a元素的属性值时，在层叠冲突这一步中
作者样式表的 color:inherit与浏览器默认样式表的 color: -webkit-link 冲突
使用层叠规则，作者样式表的 color:inherit;胜出
于是a元素的颜色属性有了值，它会继承父元素的值
因此inherit元素相当于把继承行为提前