CSS选择器优先级（权重）与三大特性

CSS选择器优先级（权重）

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。

• 简单描述
  行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
• 详细描述

1. 计算方式：每个选择器，都可计算出一组权重，格式为：（a, b, c）

	a：ID选择器的个数
	b：类、伪类、属性选择器的个数
	c：元素、伪元素的个数

选择器	权重
ul>li	(0, 0, 2)
div ul>li p a span	(0, 0, 6)
#atguigu .slogan	(1, 1, 0)
#atguigu .slogan a	(1, 1, 1)
#atguigu .slogan a:hover	(1, 2, 1)

2. 比较规则：按照从左往右的顺序，依次比较大小，当前位胜出后，后面不再对比，例如：

 (1, 0, 0) > (0, 2, 2)
 (1, 1, 0) > (1, 0, 3)
 (1, 1, 3) > (1, 1, 2)

3：特殊规则

1. 行内样式权重大于所有选择器
   2.!important 的权重，大于行内样式，大于所有选择器，权重最高！

CSS三大特性

1. 层叠性
   如果元素的同一个样式名，被设置了不同的值，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）
2. 继承性
   元素会自动拥有其父元素、或祖先元素上所设置的某些样式
   优先继承离得近的
   常见继承属性：
   text-?? ，font-?? ，line-?? ，color......
3. 优先级
   !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式
   注意：并集选择器的每一个部分是分开算的！！！
   举例（看下图）：
   
   
   
   注意：此处计算权重是分开计算，但最后还是计算在一起,此处权重应该是(0, 0, 3)