CSS性能优化提高css性能的方法

1. //css    .con .loulan1 p span{ display: block; }   
2. //html    <div class="con">   
3.     <div class="loulan">            <p><span>文字</span></p>   
4.     </div>    </div>   

在这里我们对con类里面的loulan类里的p标签里面的span标签进行样式定义。我说出来都嫌累更别说写起来了，其实你可以把浏览器看作一个人，它渲染起来肯定也会浪费性能。

而且css的匹配原理不是从左到右的，而是从右到左的，也就是说我们的这行代码里面，先查找到页面里面所有的span元素形成一个集合，再在所有的span元素往上查找，看看有多span的父元素是p元素或者父元素的父元素是p元素或者......慢慢寻找，把父元素不是p元素的删去，再往上查找看集合里的有p元素又多少它的父元素的类是loulan...浏览器说：我好累...

其实呢浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。并且Firefox 称这种查找方式为 keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的 key 就是 span。人家本来是为了能尽快过滤到一些无关样式规则的，我们这里缺一层套一层，层层不停歇。所以只是想定义一个span的样式在span上加个类岂不是更好。有人这时要说了，那样是需要在每个元素上都加上类吗？那肯定不是必须的，只不过我们要了解浏览器是怎么查找匹配的，然后结合现在的结构来做出一个最好的最方便的写法。