深入学习CSS匹配原理-css匹配规则

本文和大家重点讨论一下CSS匹配原理的概念，浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找的，浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

CSS匹配原理

用了这么多年的CSS，现在才明白CSS的真正匹配原理，不知道你是否也跟我一样？看1个简单的CSS：

viewsourceprint?

1DIV#divBoxpspan.red{color:red;}

按习惯我们对这个CSS的理解是，浏览器先查找id为divBox的DIV元素，当找到后，再找其下的所有p元素，然后再查找所有span元素，当发现有span的class为red的时候，就应用该style。多么简单易懂的原理，可是这个理解却是完完全全相反、错误的。

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的DIV#divBoxpspan.red{color:red;}，浏览器的查找顺序如下：

先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。

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

viewsourceprint?

01<style> 
 
02DIV#divBoxpspan.red{color:red;}  
 
03<style> 
 
04<body> 
 
05<dividdivid="divBox"> 
 
06<p><span>s1span>p> 
 
07<p><span>s2span>p> 
 
08<p><span>s3span>p> 
 
09<p><spanclassspanclass='red'>s4span>p> 
 
10div> 
 
11body>

如果按从左到右查找，哪会先查找到很多不相关的p和span元素。而如果按从左到右的方式进行查找，则首先就查找到的元素。Firefox称这种查找方式为keyselector（关键字查询），所谓的关键字就是样式规则中***（最右边）的规则，上面的key就是span.red。#p#

简洁、高效的CSS写法

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

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

一般写法：DIV#divBox

更好写法：#divBox

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

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

一般写法：span.red

更好写法：.red

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

viewsourceprint?

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

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

◆尽量少使用层级关系

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

更好写法：.red{..}

◆使用class代替层级关系

一般写法：#divBoxullia{display:block;}

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

Firefox和google的2篇相关css解释的文章，供大家参考：

googlepage-speed：http://code.google.com/intl/zh-CN/speed/page-speed/docs/rendering.html

mozillaFirefox：https://developer.mozilla.org/en/Writing_Efficient_CSS

【编辑推荐】