css属性值的计算过程详解_如何查看网页中某个值的计算过程

什么是属性值的计算过程？

属性值是什么：

对HTML超文本标记语言有过了解的应该都知道，在构建网页的的过程中，所用到的每个标签中的元素都会以人们想要看到的样子出现在网页中，而通常把调整一个元素的样式的行为称作渲染。在渲染的过程中，每个元素应该是以什么样子出现的，或是想要去调整这个元素的样式，就要去给它添加属性，而属性中填写的内容，就被称为属性值。所以说一个元素要想显示在页面中，它的属性就必须有属性值。

属性的计算：

首先我们来看属性值的计算方法有哪些：

一共有四种，它们分别是：
1. 确定声明值
2. 层叠冲突
3. 使用继承
4. 使用默认值

其次我们来看属性值计算的顺序：

属性值的计算方法有四种，并且一定是要按照顺序来计算的，就比如数学中最基本的运算“加减乘除”的顺序，先“乘除”再“加减”，属性值的计算也是有有顺序的。它的顺序依次为：确定声明值 —— 层叠冲突
—— 使用继承 —— 使用默认值

如何理解属性值的计算过程：

现在让我来依次介绍四种计算属性值的方法是如何运算的：

1.确定声明值
这个方式的意思是：比如说你要用“Chrome”浏览器来打开一个你编写的网页，当你的网页所使用的样式表中的某一个声明与“Chrome”浏览器默认的声明没有冲突时，那么这个声明会被当作“css”的属性值。

例：

HTML页面

<div>
	<h2 class="Exhibition">二级标签</h2>
</div>
1
2
3

自己写的样式表中的样式（下面称为作者样式）

 .Exhibition{
            font-size: 2em;
        	}
1
2
3

浏览器中的默认样式

h2 {
    font-size: 1.5em;
    font-weight: bold;>
}
1
2
3
4

这里面浏览器的默认样式和作者样式中没有冲突的声明是“font-weight: bold”，也就是字体加粗，那么这个属性值就会被当作二级标签中元素的属性的属性值。并且当作者样式和浏览器默认样式中的声明值有冲突时，会优先把作者样式中的声明值当作css的属性值。

2.层叠冲突
这个可以理解为：当样式表声明值有冲突时，就会使用层叠规则来确定css的属性值。

例：
HTML页面

<div>
	<h2 class="Exhibition">二级标签</h2>
</div>
1
2
3

作者样式

 .Exhibition{
            font-size: 2em;
        	}
 h2{
	font-size:20px;
	} 

div h2.Exhibition{
	font-size:30px;
	font-size:40px;
}     	
1
2
3
4
5
6
7
8
9
10
11

浏览器中的默认样式

h2 {
    font-size: 1.5em;
}
1
2
3

首先用层叠规则的第一步：
比较重要性
上面介绍确定声明值已经说过了，当作者样式与浏览器默认的样式声明值有冲突时，就会优先使用作者样式的声明值，所以浏览器默认样式给的字体大小“font-size: 1.5em”会被划掉。这是比较了两个样式的重要性。

第二步：
比较特殊性
比较特殊性是用选择器的权重计算来比较的,比如说".Exhibition{}"这个选择器，它当中的类选择器有一个，那么通过计算规则来说类选择器会被当作计算数的十位数（计算出来的数是一个四位数，千位由是否为内联样式决定，是为1，否为0，百位由选择器中id的选择器的数量决定，十位由选择器中所有类选择器、属性选择器、伪类选择器的数量决定，个位由所有元素选择器、伪元素选择器的数量决定）,那么它的特殊性数值为“0010”。然后再计算“h2{}”这个选择器,它是一个元素选择器，那么它的特殊性数值为“0001”。最后计算“div h2.Exhibition{}”这个选择器,它其中有两个元素选择器和一个类选择器,所以它的特殊性数值为“0012”。由此，显而易见“div h2.Exhibition{}”这个选择器的特殊性比“.Exhibition{}”和“h2{}”这两个选择器的特殊性好，所以这两个选择器当中冲突的声明值会被划掉。

最后一步：
按照代码顺序，后来者居上
上面已经计算过了，“div h2.Exhibition{}”选择器的特殊性最好，但是这个选择器当中有两个“font-size”属性的属性值，那么按照代码顺序，后来者居上，"font-size:30px"这个属性值则会被划掉。

所以经过层叠冲突的计算，二级标签h2中字体的大小为“font-size:40px”。

3.使用继承
使用继承的意思是：如果有属性经过上面两步的计算仍然没有赋予属性值的属性，并且是可以继承属性值的属性，会继承父元素的属性值

比如说字体颜色“color”这个属性中的属性值就能被继承

例：

作者样式

div{
	color:red;
}
1
2
3

浏览器样式表中h2元素选择器的color属性的属性值会显示为

h2{
	color:red;
}
1
2
3

“div{}”元素选择器是"h2{}"元素选择器的父级，并且浏览器没有赋予“h2{}”元素选择器中color属性的属性值，并且color属性的属性值是可以被继承的，那么“h2{}”就会继承父级元素的color属性的属性值“red”。

4.使用默认值
这个是最后一步，这个的理解可以为如果说一个选择器当中有属性还没有属性值的，就会使sss用默认值来当作它的属性值。因为所有的属性都要符合一点：必须要拥有属性值。(默认值是样式表赋予的)