# CSS 特性及权重
CSS三大特性：层叠性、继承性、优先级。
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。
# CSS层叠性
- 样式不冲突，不会层叠。
- 样式冲突，遵循就近原则。 长江后浪推前浪，后面样式盖前面。
# CSS继承性
- 子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
- 对于字体、字号、颜色、行距等
文本类属性具有继承性。 - 边框、外边距、内边距、背景、定位、元素高度等
与块级元素相关的属性都不具有继承性
# CSS优先级
- 复杂CSS样式，经常出现两个或多个不同样式规则应用在同一元素上，采用哪个样式，这就是典型的CSS优先级问题。
- 处理优先级问题，就是考虑样式权重的高低。
# CSS权重
# 第一步：比较优先级
作者样式表 !important > 默认样式表 !important > 作者样式表 > 默认样式表
# 第二步：比较特殊性（权重）
用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级。
| 选择器 | 权 重 |
|---|---|
| 内联样式style="" | 1,0,0,0 |
| ID选择器 | 0,1,0,0 |
| 类，伪类和属性选择器 | 0,0,1,0 |
| 标签选择器和伪元素选择器 | 0,0,0,1 |
| 通用选择器（*）、子选择器（>）、相邻选择器（+）、 同胞选择器（~ ) 、继承样式 | 0,0,0,0 |
- 数值之间没有进制计算，比如： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div等于一个类选择器的状况。
- 继承权重为0，若该元素没有直接选中，不管父元素权重多高，子元素都是0。
- 权值相同的情况下，后者优先进行渲染（也就是样式覆盖）。
- 权重是用来计算优先级的，层叠是来表现优先级的。
示例
<!--
示例1
上面的样式权重值为无穷大,
下面的行间样式的权重值为1000，
h2标题的最终颜色为red
-->
<style type="text/css">
div{
color:red !important;
}
</style>
......
<div style="color:blue">这是一个div元素</div>
<!--
示例2
第一条样式的权重计算： 1,0,0 + 0,0,1 + 0,1,0 + 0,0,1，结果为1,1,2；
第二条样式的权重计算： 1,0,0 + 0,1,0 + 0,0,1，结果为1,1,1；
h2标题的最终颜色为red
-->
<style type="text/css">
#content div.main_content h2{
color:red;
}
#content .main_content h2{
color:blue;
}
</style>
......
<div id="content">
<div class="main_content">
<h2>这是一个h2标题</h2>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
# 第三步：比较 源次序
如果第一步，第二步均不能比较不出优先级，那么最后比较样式再源代码中出现的顺序，后面的覆盖前面的。
<style type="text/css">
.a{
color:red;
}
.b{
color:blue;
}
</style>
<div class="b a">这是一个div元素</div>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
上面的示例 b 样式覆盖 a 样式，就是比较源代码中出现的顺序，而不是 class属性的顺序