css属性值的计算过程

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标签查看。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值