浏览器如何确定最终的CSS属性值？解析计算优先级与规则

前言

上篇文章中有提到CSS值的处理过程，但如果想要确定一个元素的最终样式值可以不需要这么多步。实际上我们写的任何一个标签元素无论写没写样式，它都会有一套完整的样式。理解这一点非常重要‼️
比如：一个简单的p标签

打开浏览器控制台，选中元素，切换到computed选项，勾选show all，这里就能够看到元素的所有CSS样式，尽管你什么样式也没写，它们也是有默认值的。任何标签都是这样，只不过默认值可能不一样。
一道面试题

1.    <p>前端</p>
2.    南玖

复制代码

很简单的一段代码，只需回答出这两个元素各自的文字颜色。
如果能够正确回答出，并知道其中的原理，OK那么这篇文章要讲的内容你都掌握了，如果不能，那么这篇文章需要好好阅读并理解一番。

答案是一红一蓝。
CSS属性值的确定步骤

要确定属性值的话，我们可以先想想CSS属性值都可以从哪里来？
声明值？继承？默认值？
想了想CSS值好像也只能从这三个地方来获取，再加上一个比较权重，我们是不是就可以确定一个CSS属性的值了？
ok，浏览器也确实是按这些步骤来确定CSS属性值的：

• 声明值：这里包含开发者自定义声明与用户代理的样式表【user agent stylesheet】（相当于浏览器默认样式表需要与默认值区分开）
  
• 比较权重：因为可能会有重复声明
  
• 继承：如果前两步还没确定值并且这个属性是可以继承的话，那么这个时候就可以使用继承值
  
• 默认值：最后如果还是无法确认值的话才会使用默认值
  

声明值

第一步是确认声明值，还是以上面代码为例

1.    <p>前端</p>
2.    南玖

复制代码

当前div既有开发者自定义声明样式（红框）也有用户代理样式（蓝框），这两块都属于声明值。
比较权重

再把代码做点变更

1.    <p>前端</p>
2.    南玖

复制代码

注意看此时p标签的外边距

由于开发者自定义声明样式表与用户代理样式表都有定义margin值，最终应用的是开发者自定义声明样式表，所以开发者自定义声明样式表的权重要高于用户代理样式表
如果同为开发者自定义声明的样式表有冲突，则按正常的样式权重进行比较。对比较规则不了解的同学可以查看文档
继承

同样还是上面的代码，我们可以看到对于p标签我们既没有声明他的文字颜色，用户代理样式表同样也没声明文字颜色，那么它的红色是从哪来的呢？

答案是继承自div的文字颜色，因为前两步都不能确定p标签的color属性值，而color又恰好是可以继承的，并且父元素又正好有定义color属性的值。所以此时p标签就会继承父元素的color属性，渲染成红色字体。
这里需要注意的是继承采用就近原则，与权重无关
比如：

1.    
2.        <p >前端</p>
3.        南玖
4.    

复制代码

这里虽然important的权重更高，但最终继承的还是最近的属性值。
默认值

如果前三步都没能确认属性的值，则会使用默认值。
代码同上，比如还是p标签，我们没有自定义声明它的font-size，用户代理样式表也同样没有声明，它的父级元素同样没有声明，这也就说明对于font-size来说既没有声明值也没有继承值，那它最终渲染是按多大的字号来呈现的呢？

答案就是默认值，谷歌浏览器对于p标签的默认字号为16px。
面试题解答

1.    <p>前端</p>
2.    南玖

复制代码

p标签文字为红色这很好理解，因为继承自父元素的color值。
问题在于为什么a标签没有继承呢？

因为对于a标签来说，虽然没有自定义声明color，但用户代理样式表中有声明color，所以会直接使用用户代理样式表中的color值，而不会使用继承值。
出处：https://www.cnblogs.com/songyao666/每日面试题：Github-------------------------------------------
如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新的文章～
扫描下方二维码关注公众号，回复进群，拉你进前端学习交流群

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！