CSS解析误解-选择器的从右向左解析

对于下面两种css写法，相信很多人和我想的一样

ul.new-ul{…..}

比

.new-ul{….}

更高效。

 

其实我们的理解貌似没有错。如果在类名前面加上标签的话，这样浏览器就可以先找到所有对应的标签，然后匹配类名，这样就不用全局匹配了，查找速度自然会快很多。

我们这样的理解，意味着选择器解析是从左往右的，就像jQuery的选择器一样。

但是，实际上，css选择器的解析是从右往左的。

也就是说.className就会直接一步找到className，如果在前面放了一个标签，就像tag.className，就会再次匹配前面的标签名tag，层级的匹配也是类似的。那么，很明显，匹配的次数更多了。

 

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

 

 

那么，我们们就可以明确，红色高亮部分的选择器查找要比黑色部分要快

.new-ul{….} /*快*/
ul.new-ul{….}
#new-ul{….} /*快*/
ul#new-ul{….}

那么，对于层级选择器也是一样

<ul class=”new-ul”>
    …..
    <li class=”new-ul-li”><a class=”new-ul-li-a” href=”#”></a></li>
    …..
</ul>

 那么针对上面的css结构，我们推荐使用.new-ul-li-a来选择到a，而不是.new-ul li a这样的层级选择。

参考资料

Writing Efficient CSS for use in the Mozilla UI

 

理解后，我们就可以写出更简洁、高效的css：

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误：

◆不要在ID选择器前使用标签名

一般写法：DIV#divBox

更好写法：#divBox

解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。

◆不要再class选择器前使用标签名

一般写法：span.red

更好写法：.red

解释：同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：

 

 
 
p.red{color:red;}  
span.red{color:#ff00ff} 

如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写

◆尽量少使用层级关系

一般写法：#divBox p .red{color:red;}

更好写法：.red{..}

◆使用class代替层级关系

一般写法：#divBox ul li a{display:block;}

更好写法：.block{display:block;}

 

参考：http://www.maisui99.com/css-selector-right-to-left/

         http://hi.baidu.com/xvwfgt/blog/item/416529f2847ac71db07ec5c4.html