css继承_属性值计算
2022-01-10 本文已影响0人
这样你就找不到我了
继承
子元素会继承父元素的某些CSS属性
通常，跟文字内容相关的属性都能被继承
属性值的计算过程
一个元素一个元素一次渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件：该元素的所有CSS属性必须有值
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程
如何计算：
- 确定声明值 无冲突
- 对有冲突值使用层叠规则（包括浏览器默认样式表）
- —对仍没有值的属性 若可以继承 则继承
- 对仍没有值的属性，使用默认值
强制继承：inherit
当想要继承父元素的值，而在第二步由于浏览器默认样式表或者其它原因，导致属性计算无法进行到第三步继承
可以用inherit强制继承 可以理解为声明了一个属性值。
对不能继承的属性，同样可以使用inherit强制继承。
a{
color: inherit;
}
initial 设置为默认值
demo代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css继承_默认值计算</title>
<style>
div {
color: red;
}
a{
color: inherit;
}
</style>
</head>
<body>
<div>
<a href="#">
我是红色吗？
</a>
<p>
我是红色吗？
</p>
</div>
</body>
</html>
