【CSS】选择器解析规则

当我们接触css选择起的时候，会认为浏览器解析css选择器是从左向右解析；其实不然浏览器解析css选择器是从右向左的，这样可以提高解析选择器的效率。

.a .b .c{...}
.a .b .d{...}
.a .b a{...}

如果从左向右解析到a标签解析过程如下图：

QQ截图20181123105857.png

如果从右向左解析到a标签解析过程如下图：

QQ截图20181123110439.png

为了提高解析效率，让浏览器解析更少的css选择器来匹配样式，应该减少css选择器的层级，给a标签增加一个class

.c{...}
.d{...}
.a-b-a{...}