css选择器的优先级

在前两天面试的时候，有问到过选择器的优先级，不过平时常用的还说了个一二，可是没有一个很系统的回答，下面就总结一下css优先级的相关知识吧！有不对之处，请大家多多指教！

选择器权重：

通配选择符的权值 0
标签的权值为 1
类的权值为 10
属性选择的权值为 10
伪类选择的权值为 10
伪对象选择的权值为 1

ID的权值为 100
!important的权值为最高 1000

选择器优先级比较方法：

在比较样式的优先级时，只需统计选择符中的id、class和标签名的个数，然后把相应的权值相加即可，最后根据结果排出优先级

权值较大的优先级越高

权值相同的，后定义的优先级较高

样式值含有！important，优先级最高

div .class1 #people的权值等于1+10+100=111
.class2 li #age的权值等于10+1+100=111
如果第二个选择器后定义样式，则第二个的优先级要高

可以将CSS的优先级由高到低分为六组：

1. 无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。
2. 第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
3. 第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。
4. 第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}
5. 第五级由一个或多个类型选择器定义。如 div{margin:6px;}  覆盖  *{margin:10px;} 。
6. 最低一级的选择器是为一个通配选择器，用*{margin:10px;}这样的类型来定义。

参考： https://www.jianshu.com/p/a53ba8e1fe72