CSS选择器优先级以及效率排名以及如何提高选择器效率来提升web前端性能

CSS 三大特性： 继承/优先级/叠层(后者会覆盖前者)

优先级排序：！important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认

id选择器（#myid）

类选择器（.myclassname）

标签选择器（div,h1,p）

相邻选择器（h1+p）

子选择器（ul < li）

后代选择器（li a）

通配符选择器（*）

属性选择器（a[rel="external"]）

伪类选择器（a:hover,li:nth-child）

9种选择器效率从高到低排，其中id选择器的效率最高，伪类选择器的效率最低，注意每个选择器都是有自己的效率的

注意是两种个不同的排名

eg：
p{
color:red !important;
}
<p style="color:blue"></p>

所以会显示为red。

如何写出高效的css样式，高效就是让浏览器查找更少的标签来确定匹配元素，这样对web前端性能的优化有着极大的作用，此处承接上文

1.不要在id选择器前面加上标签名 ：因为id是唯一的

2.不要在class选择器前面加上标签名：有必要再加，没必要就不加

3.尽量减少层级关系

4.尽量用类名代替层级关系

5.尽可能的使用具体的类别

注意浏览器对CSS选择器的解析是从右往左的，所以选择器的最右边的，又被称作关键选择器，它对选择器的效率起到关键作用，只要把握一点，越具体的选择器，越高效