css选择器权重问题

  大家在开发的过程中，会遇到这样一个问题，同一个dom节点，在行间设背景颜色为red,css中通过id选中dom，设置颜色为green。通过标签选择器选中dom，颜色设为blue。最后你会发现dom颜色为red。代码如下

<style>
	#demo{
		color : green; /*selector1*/
	}
	p{
		color : blue; /*selector2*/
	}
</style>
<p style="color : red" id="demo">猜猜我是什么色</p>

一种情况 ：在上述代码的基础上，去掉id，最终颜色是red；
另一种情况 ： 上述代码基础上去掉行间样式style,最终颜色为green。
selector1和selector2交换位置，结果还是不变。

出现这种情况，倘若不了解css选择器的权重问题，就搞不清楚，再遇到稍微复杂的情况，可能头就更大。例如下面的代码

<style>
	div.wrapper #demo .part .desc{  /*selector1*/
		color : #00f;
	}
	.wrapper div#demo .part .desc{ /*selector2*/
		color : #f20;
	}
</style>
<div class="wrapper" id="wrap">
	<div class="demo" id="demo">
		<p class="part">
			<strong class="desc">你觉得我的颜色是</strong>
		</p>
	</div>
</div>	

此时，文字颜色为f20,
情况一 ： 在上述代码块基础上,给selector1的_#demo_前加一个div,此时颜色就变成了00f。
情况二 ： 在上述代码块基础上,给selector2的_.wrapper_前加一个div,此时颜色就变成了f20。

有了上面的铺垫，再来说说css选择器的权重问题
权重规则如下 :
!important(Infinity) >行间样式(1000)>id选择器（100）>class|伪类|属性（10）>标签选择器|伪元素（1） >通配符(0)

括号中都是权重的值，256进制，权重相等时，谁在后以谁为准，后来居上。
所以，同一个dom节点，不同的css选择器选中，比谁的权重大，属性以权重大的为准
权重相加 ：div.demo 它的权重值为11。
权重规则基础且重要，一定要谨记于心。