CSS选择器的层叠性：
- 层叠性指的是当CSS的样式产生冲突时的处理机制。
- 层叠性的优先级：算权重，谁的权重大就采用谁的样式表，权重小的被覆盖掉
3.计算权重：（id选择器个数，类名选择器的个数，标签名选择器的个数）先比较id选择器个数，如果id选择器个数相同，在比较类选择器个数，最后才比较标签选择器个数，
顺序：在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式、作为style属性写在元样式、id选择器、类选择器、标签选择器、通配符选择器、浏览器自定义或继承。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1 .d2 p{
color: red; //(1,1,1)
}
div div #box3 p{
color: green;
}
div.d1 div.d2 div.d3 p{
color: blue;
}
</style>
</head>
<div class="d1" id="box1">
<div class="d2" id="box2">
<div class="d3" id="box3">
<p>文字颜色</p>
</div>
</div>
</div>
</body>
</html>
第一个为（1, 1，1）；
第二个为（1,0,3）;
第三个为（0，3, 4）；先比较id选择器个数排除第三个，在比较类选择器个数，排除第二个。最后显示红色。
4.id选择器的优先级最高，class优先级次之，标签名选择器的优先级最低，3者之间可认为不存在进位，其实存在进位（255进一位）但是无意义不考虑。
5.如果选中同一个元素，且权重相同，谁写在最后，为谁的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1 p{
color: green;
}
div .duanluo{
color:red;
}
</style>
</head>
<body>
<div>
<div>
<div class="d1">
<p class="duanluo">
文字颜色
</p>
</div>
</div>
</div>
</body>
</html>
此时选中了同一个元素，权重相同，那个样式写在最后，为那个样式，如果两个选择器换位，就会显示绿色。
6.如果是继承过来的样式，权重是0。（如果没有选中这个标签权重为0）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1 #box2 #box3{
color: red;
}
div.d1 div.d2 div.d3{
color: green;
}
p{
color: orange;
}
</style>
</head>
<body>
<div id="d1" class="box1">
<div id="d2" class="box2">
<div id="d3" class="box3">
<p>
文字颜色
</p>
</div>
</div>
</div>
</body>
</html>
此时显示橙色，
因为前两个没有选中，p被选中，不考虑权重。
7.如果都没有选中，权重为0，此时采用“就近原则”，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.d3{
color: green;
}
#box1{
color:red;
}
</style>
</head>
<body>
<div id="box1" class="d1">
<div id="box2" class="d2">
<div id="box3" class="d3">
<p>
文字颜色
</p>
</div>
</div>
</div>
</body>
</html>
此时上面两个选择器都没有选中，不能比较去权重，id为box1离p标签远，
class="d3"离p标签近，所以此时会显示绿色。
判断方法：
1.先看有没有选中元素
2.如果选中元素，计算权重排除，
3.如果权重相同，谁写在最后谁起作用，
4.如果没选中元素，采用“就近原则”，谁的表达离标签近，谁起作用。
