css匹配,提高css效率

一直没有认真去了解CSS是如何运行,样式里面的选择器、元素的匹配规则。不清楚怎么样的样式选择、匹配才能让页面运行得更快、效率更高。如CSS：

       div#divBox p span.blue{color:blue;}   

我以前对这个CSS的理解是，浏览器先查找id为divBox的div元素，当找到后，再找其下的所有p元素，然后再查找所有span元素，当发现有span的class为blue的时候，就应用该style。认为浏览器是从左往右匹配CSS的，可是这个理解却是完完全全相反、错误的。

CSS匹配原理：

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

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

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

<style> 

   div#divBox p span.blue{  color:blue;  } 

<style> 

<div id="divBox">  

        <p><span>span1</span></p>  

        <p><span>span2</span></p>  

        <p><span>span3</span></p>  

         <p><span class='blue'>span4</span></p>

</div>   

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

简洁、高效的CSS:

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

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

       一般写法：div#divBox

       更好写法：#divBox

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

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

      一般写法：span.blue

      更好写法：.blue

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

             p.red{color:blue;} 

             span.blue{color:blue;}   

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

3.尽量少使用层级关系

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

       更好写法：.blue{..}

4.使用class代替层级关系

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

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