<!-- 我们现在已经学过了很多的选择器，也就是说我们有很多种方法从HTML中找到某个元素，那么就会有一个问题：如果我通过不用的选择器找到了相同的一个元素，并且设置了不同的样式，那么浏览器究竟应该按照哪一个样式渲染呢？也就是不同的选择器它们的优先级是怎样的呢？
是先来后到呢还是后来居上呢？统统不是，它是按照下面的选择器的权重规则来决定的。
之前先确定是否是继承，如果是继承权重几乎为0，如果是选中标签，通过权重顺序数选择器数量确定权重
CSS选择器权重:
*内联式权重：1000
*id选择器：100
*类选择器：10
*元素选择器：1
*权重计算永不进位
-->
<!DOCTYPE html>
<html>
<head>
<title>选择器权重深入</title>
<style type="text/css">
<!-- 001 无id选择器0 无类选择器0 标签选择器1 因此是001-->
p{
color: gray;
}
/*003*/
div div p{
color: yellow;
}
/*010*/
.active{
color: purple;
}
/*011*/
div .active{
color: black;
}
/*012*/
div div .active{
color: blue;
}
/*120*/
.wrap1 #box2 .active{
color: green;
}
/*201*/
#box1 #box2 p{
color:red;
}
/*300 根据权重数是300 但是整个是继承，不能这样数，继承权重几乎为0*/
#box1 #box2 #box3{
color: orange;
}
/*继承性 权重几乎为0*/
.container{
color: red;
}
/*012*/
.container ul li{
color: blue;
}
</style>
</head>
<body>
<div class="wrap1" id="box1">
<div class="wrap2" id="box2">
<div class="wrap3" id="box3">
<p class="active">walter什么颜色</p>
</div>
</div>
<div class="container">
<ul>
<li>
小米手机
</li>
</ul>
</div>
</div>
</body>
</html>