css选择器的分类及优先级计算方法总结

概述

首先声明一下CSS三大特性—— 继承、 优先级和层叠。继承即子类元素继承父类的样式；优先级是指不同类别样式的权重比较；层叠是说当数量相同时，通过层叠（后者覆盖前者）的样式。
css选择符分类
首先来看一下css选择符（css选择器）有哪些？
1.标签选择器（如：body,div,p,ul,li）
2.类选择器（如：class="head",class="head_logo"）
3.ID选择器（如：id="name",id="name_txt"）
4.全局选择器（如：*号）
5.组合选择器（如：.head .head_logo,注意两选择器用空格键分开）
6.后代选择器 （如：#head .nav ul li 从父集到子孙集的选择器）
7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
8.继承选择器（如：div p,注意两选择器用空格键分开）
9.伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
11.子选择器 （如：div>p ,带大于号>）
12.CSS 相邻兄弟选择器器 （如：h1+p,带加号+）

css优先级
CSS优先级：是由四个级别和各级别的出现次数决定的。
四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。

优先级的算法：
每个规则对应一个初始"四位数"：0、0、0、0
若是 行内选择符，则加1、0、0、0
若是 ID选择符，则加0、1、0、0
若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0
若是 元素选择符/伪元素选择符，则分别加0、0、0、1
算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。

需注意的：
①、!important的优先级是最高的，但出现冲突时则需比较”四位数“；
②、优先级相同时，则采用就近原则，选择最后出现的样式；
③、继承得来的属性，其优先级最低；

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

*css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。