css 原理

 http://kb.cnblogs.com/page/125663/

from right to left effect:

DIV#divBox p span.red{color:red;} => find class ‘red’, then find span, then find p ….

in order to filter some unrelated 元素 quickly

how to optimize 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有微妙的速度优势）。