html中样式的生效顺序
以前经常遇到想重新设置css，结果总是不成功，逼不得已只能修改对应元素的style属性才成功。今天仔细探索下css的生效顺序。
首先直接写在元素上的style属性肯定是最高优先级的，这一点不用怀疑。
css基本优先级(单层选择器)
id选择器 > 类选择器 > dom选择器
解释：如果css文件中对一个dom的css有id类和dom三种描述，并且有重复的style属性，则以上面的优先级依次生效。
同一种选择器下，写在后面的生效。
混合
实际上选择器并不是单一的，可能有多层设置多重混合。
不同的选择器有多层
<div id="main" class="root1">
<div id="smain" class="root2">
<div id="cmain"class="root3">
<p id="p">Hello</p>
</div>
</div>
</div>
1 先看描述准确度
先看描述切确程度，定位到元素本身的优先，例如下面。即使有多个id，但锁定的是div，而p只有类描述，那p中文字也是红色
#smain #cmain{
color: yellow;
}
p{
color: red;
}
如果都没有定位到元素本身则更近的优先：例如id虽然比类优先级高，但是root3修饰的div离p更近，所以p中是红色。
#smain{
color: yellow;
}
.root3{
color: red;
}
2 再看id选择器个数
若准确度相同，则看多层描述中id选择器的个数，个数多的优先. 例如下面虽然#smain p好像没有后面的描述的详细，但是含有1个id选择器（大于后者0个），所以p文字是黄色。
#smain p{
color: yellow;
}
.root1 .root2 .root3 p{
color: red;
}
再比如下面，这个非常经典！！！虽然后者直接#p锁定了p但是按照上述规则，前者是俩id选择器，所以优先级更高。
#smain #cmain p{
color: yellow;
}
.root1 .root2 .root3 #p{
color: blue
}
3 id选择器个数相同，则看类选择器规则同上
4 类选择器个数相同，则看dom选择器规则同上
5 dom选择器个数也相同
写在后面的优先生效 大于号不影响上述规则，结果仍为黄色，2写在后面生效
#cmain>p{
color: green;
}
#cmain p{
color: yellow;
}
important
实在搞不定用important关键字提高到最高优先级。
p{
color: gray!important
}