【转】css解析原理

关于css的书写思想太多文章了，其实找到自己的、团队的、项目的最关键：
A：http://www.qilei.org/201009/talking-about-the-oocss-for-web-site/  

B: http://www.zhangxinxu.com/wordpress/?p=916 

C: http://www.zhangxinxu.com/wordpress/?p=1098 

关于css解析原理：
http://www.zhangxinxu.com/wordpress/?p=1045 

http://lushuncheng.cn/show.asp?ArticleID=854 

下文是转载原文：

匹配原理： 

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

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

如果按从左到右查找，哪会先查找到很多不相关的p和span元素。而如果按从右到左的方式进行查找，则首先就查找到<span class='red'>的元素。firefox称这种查找方式为key selector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。 

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

1.不要在ID选择器前使用标签名 
一般写法：DIV#divBox 
更好写法：#divBox 
解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。 

2.不要再class选择器前使用标签名 
一般写法：span.red 
更好写法：.red 
解释： 同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下： 
p.red{color:red;} 
span.red{color:#ff00ff} 
如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写 
3.尽量少使用层级关系 
一般写法：#divBox p .red{color:red;} 
更好写法：.red{..} 

4.使用class代替层级关系 
一般写法：#divBox ul li a{display:block;} 
更好写法：.block{display:block;} 

PS：看有些同学对从右到左的理论保持怀疑，下面贴出firefox和google的2篇相关css解释的文章，供大家参考 

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

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