1.首先抛出一个问题,为什么最终’a’标签渲染的颜色是蓝色。
<div>
<a>click</a>
</div>
div {
color: 'red'
}
为什么a标签没有继承父元素的color属性?
2.先抛出一个结论:每一个元素必须拥有全部css属性并且有值浏览器才能正确渲染出元素,这个元素从无属性值到每个属性都有值为css属性的计算过程。
第一步.确认声明值:参考样式表中没有冲突的声明,作为css属性值。比如一个h1标签的开发者样式表和浏览器默认样式表进行对比,没有冲突的样式会直接作为这个元素的最终样式。
第二步.层叠冲突:多种选择器或者浏览器默认样式都选中设置的样式为层叠冲突,对于层叠冲突的处理分三步:
(1)比较重要性:开发者样式覆盖浏览器默认样式,比如使用通配符*设置margin:0后,body的默认8像素的margin就没有了。
(2)比较特殊性:选择器的权重。
(3)比较源次序:后面的覆盖前面的,比如p{color:blud,color:red} 文字颜色为红色
第三步.使用继承:对仍然没有值的属性,若可以继承(文字相关的等),则继承父元素的值,所以回到最开始的问题,a标签默认有color属性值,所以不会继承div父元素的color值
第四步.使用默认值:对于仍然没有值的属性,使用默认值
打开浏览器开发者工具,进入computed标签查看。