<!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元素相当于把继承行为提前