在大多数人的观念中（包括我自己），都觉得浏览器对 CSS选择符的解析式从左往右进行的，因为中国人有一个习惯，不论干什么，潜意识中的顺序都是从左到右，从上到下，从大到下，但实际上是从右向左进行的。
先说下为啥是从右向左而非从左往右，
CSS选择器是 div div p.p1 span.red{color:red}，如果从左到右一层一层的筛选：首先会看到很多div被筛选出来，接下来筛选每一个div，首先在#div2中看到了class=p1的p，此时我们很是高兴，感觉胜利就在前方了，再看class=p1的p标签的子元素，看到第一个很是失望，不符合span.red，不要急，再看下一个又不符合规则，小小的安慰自己一下，最后一个含有class，说不定就是了，结果，结果居然class=green，此时火冒三丈，就差最后一层，怎奈居然出现这种事，无奈之下只能在返回#div2继续匹配它的子元素....
但如果我们换一个思路，首先匹配class=red 的 span，我们找到2个符合条件的的span然后在和上一层比对，我们需要的是span.red 是 p.p1的下属元素，此时就发现刚才筛选出来的第二个 span 元素不符合要求，再来匹配第一个，层层向上匹配，恭喜你，最终匹配成功
总结：也就是说，对于浏览器而言，对于程序而言，css选择符从右到左的解析更为高效
根据浏览器解析css选择符这一特性，编写CSS需要注意以下几点：
（1）避免使用通配规则
除了传统意义上的通配选择符之外，我们把相邻兄弟选择符、子选择符、后代选择符合属性选择符都归纳到通配规则分类下，推荐仅使用 ID、类和标签选择符。
（2）不要限定 ID 选择符
在页面中一个指定的ID只能对应一个元素，所以没有必要添加额外的限定符。例如，div#header是没有必要的，应该简化为#header。
（3）不要限定类选择符
不要用具体的标签限定类选择符，而是根据实际情况对类名进行扩展。例如span.red改为.red更好。当然如果html是<p class="red"></p><span class="red"></span>这样，则span.red更为高效
（4）让规则越具体越好
不要试图编写像 ol li a 这样的长选择符，最好是创建一个像.list-anchor一样的类，并把它添加到适当的元素上。
（5）避免使用后代选择符
通常处理后代选择符的开销时最高的，而使用子选择符也可以得到想要的结果，并且更加高效。
（6）避免使用标签—子选择符
如果有像#menus > li > a这样的基于标签的子选择符，那么应该使用一个类来关联每个标签元素，例如.menus-item。
（7）检查子选择符的所有用途
检查所有使用子选择符的地方，然后尽可能用具体的类取代它们。
（8）依靠继承
了解哪些属性可以通过继承而来，然后避免对这些属性重复指定规则。例如，对列表元素而不是每个列表元素指定list-style-image。请参考继承属性的列表来了解每个元素的可继承的属性。
最后，记住一句话：css选择符是从右向左解析的，css选择符是从右向左解析的，css选择符是从右向左解析的
