css选择器的渲染机制

css样式表，对每条规则是按照从右到左匹配的。

示例1：

*{ }

    *通配符 将匹配所有的元素，浏览器进行渲染的时候需要计算每一个元素，效率最低。

示例2：

ul#nav{  }

    在页面中每个指定的id 只能对应一个元素，没必要额外添加限定符，加了反而效率低。同事也不要用具体的标签限定类选择器,而是对类名进行扩展。例如把ul.nav改成.main_nav更好。

示例3：

#ul li{
color:#e5e5e5;
}

    了解这方面的知识后，我们知道这个之前看似高效地规则实际开销相当高，浏览器必须遍历页面上每个li元素并确定其父元素的id是否为nav。

小结：

1. 避免使用通配规则。如 *{} 计算次数惊人！只对需要用到的元素进行选择
2. 尽量少的去对标签进行选择，而是用class。如：#nav li{},可以为li加上nav_item的类名，如下选择.nav_item{}
3. 不要去用标签限定ID或者类选择符。如：ul#nav,应该简化为#nav
4. 尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
5. 考虑继承。了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则

阅读更多