CSS 之 浏览器解析 CSS 选择器

解析规则 -- 从右往左

浏览器解析 CSS 选择器遵循从右向左的规则！示例如下：

<div>
    <div class="box">
      <p class="p1"><span>1</span><span>2</span></p>
      <p class="p1"><span class="two">3</span><span>4</span></p>
    </div>
    <div class="box">
       <p class="p1"><span>5</span><span class="two">6</span></p>
       <p class="p2"><span class="two">7</span><span  >8</span></p>
    </div>
 </div>

假设此时 CSS 选择器为 .box .p1 .two{color:red}，再假设此时浏览器是 从左往右 解析 CSS 选择器！那么我们就会匹配很多次！！

因为 span 1 、2、3、4、5、6、7、8 都会被匹配一次，因为它们都满足父元素为 .box .p1 ！！但这样效率会很很很低

如果我们采用从右往左 解析 CSS 选择器，即先去匹配 .two ，会发现有两个可以匹配，再去匹配它们的父元素，这样就会快很多！！

因为一个元素可能会有很多个子元素，但只会有一个父元素！！所以从右往左匹配就会快很多！！

简单来说浏览器从右往左进行查找的好处就是为了减少匹配元素的数量、提高选择器的性能、改善渲染速度 ！