CSS权重

选择器类型

选择器	例子
Style	style=" "
ID	#id{}
Class	.class{}
标签	div{}；view{}
属性	[type=‘text’]{}
伪类	:hover{}
伪元素	::first-line{}
相邻选择器 子代选择器	> +

选择器权重计算规则

样式的最终确定，来源于 重要性（eg:!important） 和 样式声明 的双重判定 ，重要性不同，则应用带有!important的样式声明，重要性相同时，则根据以下的权重来进行判断。

注意：权值的0000写法仅是一种表达方式，与十进制的一千（1000）以及二进制的八（1000）没有任何关系！！！

1. 内联样式 ，如:style=" " 权值为1000
2. ID选择器，如：#id{} 权值为0100
3. 类；伪类；属性选择器，如.class{} 权值为0010
4. 类型选择器，伪元素选择器，如div{} 权值为0001
5. 通配符、子选择器、相邻选择器等。如* > +，权值为0000
6. 继承的样式没有权值

实例：

  <div id='b' class="a"></div>

样式一：

			.a.a {
				width: 40px;
				height: 40px;
				background: red;
			}
			
			.a {
				width: 40px;
				height: 40px;
				background: green;
			}

解释：.a.a 是两个类选择器 根据权值0010+0010=0020；而.a是一个类选择器 权值为0010。比较0020与0010 在相同的位置上 2>1,所以应用.a.a的样式。

样式二：

			.a.a {
				width: 40px;
				height: 40px;
				background: red;
			}
			
			.a {
				width: 40px;
				height: 40px;
				background: green !important;/*此处不同，增加important*/
			}

解释：!important提升了样式的重要性，所以即使权值0020>0010 但仍然应用带!important的0010的样式声明。

彩蛋

1. 权值是256进制（错误）的由来：以前可以用256个class抵消一个ID 并不是规定的权值进制运算。
2. !important在ie6-有些bug。

p{
  color:red !important;
  color:blue;    
}        //会显示blue
---------------------------------------------------------------------
p{color:red !important;  }
p{color:blue;}        // 这样就会显示的是red。说明ie6还是支持important的

参考链接

知乎：前端杂谈: CSS 权重 (Specificity)
简书：也来谈谈CSS层叠
segmentfault：CSS中选择器的权重值
MDN Web Docs：MDN Web Docs
W3C 标准：W3C 标准

个人的学习总结，欢迎大家指正批评。