浏览器中属性值的计算过程

属性值的计算过程

上一篇博客简单的介绍浏览器渲染页面的过程&＃xff0c;这次主要介绍一下浏览器中属性值的计算过程。
一个元素的所有属性值&＃xff0c;从没有值到有值&＃xff0c;这个计算过程叫做属性值的计算过程。

1.确定声明

首先将样式表中没有冲突的声明&＃xff0c;作为CSS属性值。
当自己书写的CSS样式与浏览器写的样式没有冲突时&＃xff0c;那么自己写的CSS样式就会被浏览器给渲染出来显示。

<style>a{background-color: red;}style>


2.层叠冲突

对样式表中有冲突声明使用CSS层叠规则&＃xff0c;来确定CSS的属性值。

<style>a{background-color: red;color: green;}style>


当自己书写的CSS样式与浏览器写的样式冲突时&＃xff0c;会优先使用自己的样式。同样的道理&＃xff0c;当自己同时对一个元素写了多个样式&＃xff0c;那么会计算特殊性&＃xff0c;来确定选择的样式。如&＃xff1a;

<style>a{color: green;}.test{color: red;}style>


在F12中可以清晰的看到最终浏览器选择的样式是类选择器的&＃xff0c;具体的缘由可去看一下这篇博客&＃xff08;CSS选择器优先级&＃xff09;。

3.使用继承

对仍然没有值的属性&＃xff0c;若可以继承&＃xff0c;则继承父元素的值。如&＃xff1a;

<style>div{color: red;}style>


当书写样式时&＃xff0c;没有对p标签的字体颜色进行限定时&＃xff0c;那么p标签里的文字会继承父元素div里设置的字体颜色。

4.使用默认值

对仍然没有值的属性&＃xff0c;使用默认值。

当自己书写所有样式都没有对a标签的字体颜色进行限定时&＃xff0c;那么浏览器会采用自带a标签的字体颜色的样式。