CSS选择器执行顺序

所有写CSS样式的人应该都会明白一条: 少用层级关系。
具体为什么可能有一部分人就不明白了。
比如，
.example p span {
color: red;
}
第一感觉这么写其实层级挺清晰的，类名example下的p标签下的span，这个范围圈定的已经很明确了。

其实不然，浏览器是不这么认为的。这样反而会让浏览器花费更多的时间去解析满足条件的span的样式。，因为CSS选择器是从右往左进行解析的。

带着这个顺你在去感觉一下上面的路径span的样式：
先去找到所有的span，接着沿着一个span标签向上去找到父元素是p标签的span，然后在向上查找这个p标签的父元素类型是.example的元素，如果满足条件就加入结果集；如果知道根元素html都不满足，就排除这一个span。然后就会从下一个span开始继续这个过程，试想一下如果你一个DOM结构中有很多很多的span，如果还有很多p标签呢？

这里我们在来评价一下你的第一感觉就是从左向右。
你在按照从左向右的思维进行书写的时候，因为样式结构是你自己创建的，你按照这个思维就会感觉这个路径顺序很清晰。但是，你别忘了，你的思维不代表浏览器的思维。而浏览器在执行的时候是需要很多分析、遍历和回溯的过程的。 浏览器读到这条规则的时候会去查找所有的example类名的标签，然后又在这个标签下面进行遍历再找到所有的p标签（这里就出现了大量的遍历工作），接着在找到的每一个p标签向下再去遍历子元素是不是span标签，是就加入结果集，不是再回溯到下一个p标签进行遍历子元素是不是有span标签。

按照上面的分析，很明显自右向左比自左向右执行的效率要搞得多的多。
因为自右向左一开始就限定了一个很精确的目标范围，这就筛选掉了大量的不满足条件的最右的子节点，减少了很多的回溯的过程。
不过有一个情况是，如果一开始就有很多不符条件的span，自右向左确实是浪费了很多向上查找的过程。不过通常的角度来考虑，自右向左是更精确的，因为出发点就是你的目标标签，因为浏览器是不知道你的DOM结构是什么样的。

所以少用层级关系。