关于CSS优先级问题

当一个元素被重复设定相同属性时，浏览器会根据一定的规则来决定该元素应用哪个属性值。

优先级

• !important > 权重规则 > 浏览器规定的默认样式 > 继承样式

注意：!important尽量少用！当同一个属性被定义了多次!important，浏览器会根据权重值决定显示那个属性值，权重相同时，后面的覆盖前面的。

权重值如何计算？

• 内联样式权重为 1,0,0,0
• id选择器权重为 0,1,0,0
• 类、属性、伪类选择器权重为 0,0,1,0
• 标签、伪元素选择器权重为 0,0,0,1
• 通配符（*）权重为 0,0,0,0

计算方式：相同位相加即可，例如：

<style>
	/*标签选择器0,0,0,1 + id选择器0,1,0,0 = 0,1,0,1， 权重值为0,1,0,1*/
	div #idName {
		color: red;
	}
	
	/*标签选择器0,0,0,1 + 类选择器0,0,1,0 + 标签选择器0,0,0,1 + 类选择器0,0,1,0 = 0,0,2,2，权重值为0,0,2,2*/
	p.className div.className1 {
		color: red;
	}
</style>

注意：当同一个元素有多个声明时，计算权重值才有意义，权重值相同时，后面的会覆盖前面的。