# CSS层级关系
如果同个元素有两个或以上冲突的CSS规则，浏览器有一些基本的规则来决定哪一个非常特殊而胜出
- 选择器一样的情况下后面的会覆盖前面的属性
p{
color:red;
}
p{
color:black;
}
/* 最终黑色 */
1
2
3
4
5
6
7
2
3
4
5
6
7
- 一个选择器越多特性，样式冲突的时候将显示它的样式
- tag(标签选择器):1
- class(类选择器):10
- id(id选择器):100
- tag行内样式:1000
示例
body #container .active p:1+100+10+1 = 112div p.active:1+1+10 = 12div p:1+1 = 2
<div><p>文字显示为蓝色</p></div>
1
p{
color:green;
}
/* 1 */
div p{
color:blue;
}
/* 1+1 = 2 */
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
总结
- 继承不如指定:继承的样式永远没有指定的样式优先
- id>class>tag>*
- 越具体越大
- tag#id>#id,tag.class>.class
<style>
.class1 p#id2 .class3{font-size:25px}
div .class2 span#id3{font-size:18px}
#id1 .class3{font-size:14px}
.class1 #id2 .class3{font-size:12px}
#id1 #id2{font-size:10px}
</style>
<div id="id1" class="class1">
<p id="id2" class="class2">
<span id="id3" class="class3">我是多大字号？</span>
<!-- 25px -->
</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18