属性值的计算过程
一个一个元素依次渲染，顺序按照页面文档的树形目录结构进行。
渲染每个元素的前提条件：该元素的所有css属性都必须有值。
一个元素，css属性从无到有，这个计算过程叫属性值的计算过程。
css无属性值 ——> 每个属性都有值
- 确定声明值
参考样式表（作者样式表和浏览器默认样式表）中没有冲突的声明，作为css属性值。
- 层叠冲突
对样式表有冲突的声明使用层叠规则，确定css属性值。
- 使用继承
对仍然没有值的属性，若可以继承，则继承父元素的值。
- 使用默认值
对仍然没有值的属性，使用默认值。
层叠
声明冲突：同一样式，多次应用到同一元素。
层叠：解决声明冲突的过程，浏览器自动处理（权重计算）。
层叠，可用于不修改代码，覆盖样式，便于复原，特殊日子特殊皮肤啥的。
1. 比较重要性
重要性从高到低：
作者样式表：开发者书写的样式，我们写的样式表。
1） 作者样式表中的 !important样式,建议不使用。
2） 作者样式表的普通样式表。
3 ) 浏览器的默认样式。
2. 比较特殊性
看选择器
总体规则特殊选择器选中的范围越窄，越特殊，覆盖。元素选择器最小。
具体规则：通过选择器，计算出一个4位数（xxxx）。
-
千位，如果是内联样式，千位为1，否则为0。内联样式慎用。
-
百位，等于选择器中所有id选择器的数量。通常页面上只出现一次。
-
十位，看类选择器，属性选择器，伪类选择器的数量。
-
个位：等于选择器中所有元素选择器，伪元素选择器的数量。
3. 比较原次序
代码书写靠后胜出。
## 例子ａ元素
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性值的计算</title>
<style>
div
{color: red;}
</style>
</head>
<body>
<div>
<a href="#" >百度一下</a>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut dolores atque molestias ex consequatur esse adipisci, neque officiis sit libero explicabo excepturi expedita iste omnis modi corporis ducimus pariatur saepe?</p>
</div>
</body>
</html>
看该图片中的ａ元素求ｃｏｌｏｒ属性的值时，按属性值的计算过程第一步确定声明值，ａ元素无作者样式表（即没有在代码中写ａ｛｝），而看图的红圈里有浏览器默认声明则确定ａ元素的颜色样式，后面的层叠继承啥的根本到不了这一步。
1099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
