CSS层叠和继承

---

一、层叠[重要]

声明冲突：同一个样式，多次应用到同一个元素

层叠：解决冲突的过程，浏览器自动处理(权重计算)

1.比较重要性

重要性从高到低：

作者样式表：开发者书写的样式
1）作者样式表中的!important样式
2）作者样式表中的普通样式
3）浏览器默认样式表

2. 比较特殊性

看选择器

总体规则：选择器选中的范围越窄，月特殊

具体规则：通过选择器，计算出一个4位数（xxxx）

1. 千位数：如果是内联样式记1，否则0
2. 百位数：等于选择器中所有id选择器的数量
3. 十位数：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4. 个位数：等于选择器中所有元素选择器、伪元素选择器的数量

注意：逢256进1

3.比较源次序

代码书写靠后的胜出

4. 应用

1. 重置样式表
   书写一些作者样式，覆盖浏览器的默认样式
   重置样式表->浏览器的默认样式

常见的重置样式表：normalize.css、reset.css、meyer.css

2. 爱恨法则
   link>visited>hover>active

二、继承

子元素会继承父元素的某些CSS属性

通常，跟文字内容相关的属性都能被继承

三、属性值的计算过程

一个元素一个元素渲染，，顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件：该元素的所有CSS属性必须有值

一个元素，从所有属性都没有值，到所有属性都有值，这个计算过程，叫做属性值计算过程

1. 确定声明值：参考样式表中没有冲突的声明，作为CSS属性值

<h1 class="test">Lorem</h1>

css属性值：

作者样式表：
.red{color:red;fonnt-size:40px;
}
h1{font-size:26px;}
div h1.red{font-size:3em;font-size:30px;}

浏览器默认样式表
h1{display:block;font-size:2em;fonnt-weight:bold;}

2. 层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值(比较重要性、特殊性、源次序)

<h1 class="test">Lorem</h1>

css属性值：color：red
backgroud-color:
text-weight:bold;
display:block
其他CSS属性：…

作者样式表：
.red{color:red;fonnt-size:40px;
}
h1{font-size:26px;}
div h1.red{font-size:3em;font-size:30px;}

浏览器默认样式表
h1{display:block;font-size:2em;fonnt-weight:bold;}

3. 使用继承
   对仍然没有值的属性，若可以继承，则继承父元素的值

4. 对仍然没有值的属性使用默认值
   特殊的两个CSS取值：
   1）inherit:手动继承，将父元素的值取出应用到该元素
   2） initial:初始值，将该属性设置为默认值