css匹配原理与优化

一. 匹配原理

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

　　浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。Firefox 称这种查找方式为 keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的 key 就是 span.red。

二.css优化

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

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

　　一般写法：DIV#divBox

　　更好写法：#divBox

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

　　2、不要在 class 选择器前使用标签名

　　一般写法：span.red

　　更好写法：.red

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

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

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

　　3、尽量少使用层级关系

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

　　更好写法：.red{..}

　　4、使用 class 代替层级关系

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

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

　　5、在 CSS 渲染效率中 id 和 class 的效率是基本相当的

　　class 会在第一次载入中被缓存，在层叠中会有更加好的效果，在根部元素采用id会具有更加好（id有微妙的速度优势）。