CSS声明冲突与层叠机制
CSS声明冲突
CSS声明冲突：当多个选择器选中同一个标签，如果属性名相同，属性值不同时则会产生冲突。举个例子：
html：
<body>
<p class="txt">CSS声明冲突</p>
</body>
css：
p{
color: blue;
}
.txt{
color: red;
}
body > p{
color: yellow;
}
最终文字颜色为红色：
CSS层叠机制
CSS层叠机制：如果发生声明冲突浏览器会自动触发自己的层叠机制，在上面例子发生声明冲突的过程中浏览器就触发了层叠机制，层叠过程分成3步:1.比较优先级
作者（写代码的人），用户（浏览页面的人）和用户代理（一般指浏览器）。一般来说作者指定的样式权重值高于用户样式权重值，用户样式权重高于客户端（用户代理）权重值。一般权重值跟对象，是否有!important（在属性值后跟上!important 就表示这是一条重要声明，不加则是普通声明）,特异度和位置先后有关。在层叠顺序中，以下权重值从小到大为：
（1）用户代理样式
（2）用户一般样式
（3）作者一般样式
（4）作者重要样式（！important）
（5）用户重要样式（！important）
2.比较特殊性
每个声明都有一个权重（特殊性），特殊性高的会胜出，低的淘汰，在比较特殊性时，每个冲突的声明会生成四个数字分组（a、b、c、d）来比较特殊性
分组值会根据选择器的类型而定，它们有四个规则:
（1）、使用ID选择器数字分组b值+1（0,1,0,0）
（2）、使用class、属性(如[color="red"])、伪类(如:hover) 数字分组c值+1（0,0,1,0）
（3）、使用元素和伪元素(如::before) 数字分组d值+1（0,0,0,1）
（4）、使用通配符（*）、子选择器（>）、相邻同胞选择器（+）等选择器数字分组值是（0,0,0,0）(所以他对总特殊性没有影响)
到这里会发现分组值a没有说，a值是行内样式的，所以行内样式特殊性最高,数字分组值是（1,0,0,0)
综上所述，最开始的例子特殊性比较如下：
p{ /* (0,0,0,1) */
color: blue;
}
.txt{ /* (0,0,1,0) */
color: red;
}
body > p{ /* (0,0,0,2) */
color: yellow;
}
3.比较原次序
首先浏览器是从上往下解析代码的，所以在前面两步都未分出胜负的情况下，写在下面的代码则会胜出
举个例子：
p{
color: yellow;
}
p{
color: red;
}
这里优先级和特殊性都无法分出胜负，写在下面的会胜出，最终p标签文字颜色为红色，所以css重置文件我们也会放在最上面再引入自己的css文件。
