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

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

打开浏览器控制台，选中元素，切换到computed选项，勾选show all，这里就能够看到元素的所有CSS样式，尽管你什么样式也没写，它们也是有默认值的。任何标签都是这样，只不过默认值可能不一样。一道面试题<div style="color: red;">
   <p>前端</p>
   南玖
</div>
很简单的一段代码，只需回答出这两个元素各自的文字颜色。如果能够正确回答出，并知道其中的原理，OK那么这篇文章要讲的内容你都掌握了，如果不能，那么这篇文章需要好好阅读并理解一番。

答案是一红一蓝。CSS属性值的确定步骤要确定属性值的话，我们可以先想想CSS属性值都可以从哪里来？声明值？继承？默认值？想了想CSS值好像也只能从这三个地方来获取，再加上一个比较权重，我们是不是就可以确定一个CSS属性的值了？ok，浏览器也确实是按这些步骤来确定CSS属性值的：声明值：这里包含开发者自定义声明与用户代理的样式表【user agent stylesheet】（相当于浏览器默认样式表需要与默认值区分开）比较权重：因为可能会有重复声明继承：如果前两步还没确定值并且这个属性是可以继承的话，那么这个时候就可以使用继承值默认值：最后如果还是无法确认值的话才会使用默认值声明值第一步是确认声明值，还是以上面代码为例<div style="color: red;">
   <p>前端</p>
   南玖
</div>

当前div既有开发者自定义声明样式（红框）也有用户代理样式（蓝框），这两块都属于声明值。比较权重再把代码做点变更<div style="color: red;">
   <p style="margin: 2px;">前端</p>
   南玖
</div>
注意看此时p标签的外边距

由于开发者自定义声明样式表与用户代理样式表都有定义margin值，最终应用的是开发者自定义声明样式表，所以开发者自定义声明样式表的权重要高于用户代理样式表如果同为开发者自定义声明的样式表有冲突，则按正常的样式权重进行比较。对比较规则不了解的同学可以查看文档继承同样还是上面的代码，我们可以看到对于p标签我们既没有声明他的文字颜色，用户代理样式表同样也没声明文字颜色，那么它的红色是从哪来的呢？

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

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

答案就是默认值，谷歌浏览器对于p标签的默认字号为16px。面试题解答<div style="color: red;">
   <p>前端</p>
   南玖
</div>

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

因为对于a标签来说，虽然没有自定义声明color，但用户代理样式表中有声明color，所以会直接使用用户代理样式表中的color值，而不会使用继承值。
weibo.com/ttarticle/p/show?id=2309405159770410582150
weibo.com/ttarticle/p/show?id=2309405159770368639312
weibo.com/ttarticle/p/show?id=2309405159770297598110
weibo.com/ttarticle/p/show?id=2309405159770259849338
weibo.com/ttarticle/p/show?id=2309405159770221838420
weibo.com/ttarticle/p/show?id=2309405159770184351814
weibo.com/ttarticle/p/show?id=2309405159770146603069
weibo.com/ttarticle/p/show?id=2309405159770108592224
weibo.com/ttarticle/p/show?id=2309405159769936625928
weibo.com/ttarticle/p/show?id=2309405159769898877168
weibo.com/ttarticle/p/show?id=2309405159769861128438
weibo.com/ttarticle/p/show?id=2309405159769823641812
weibo.com/ttarticle/p/show?id=2309405159769785893113
weibo.com/ttarticle/p/show?id=2309405159769748144220
weibo.com/ttarticle/p/show?id=2309405159769672646946
weibo.com/ttarticle/p/show?id=2309405159769634635939
weibo.com/ttarticle/p/show?id=2309405159769596887288
weibo.com/ttarticle/p/show?id=2309405159769559138441
weibo.com/ttarticle/p/show?id=2309405159769521651938
weibo.com/ttarticle/p/show?id=2309405159769483641029
weibo.com/ttarticle/p/show?id=2309405159769311674519
weibo.com/ttarticle/p/show?id=2309405159769274187881
weibo.com/ttarticle/p/show?id=2309405159769236176997
weibo.com/ttarticle/p/show?id=2309405159769198428210
weibo.com/ttarticle/p/show?id=2309405159769160941621