css样式表,对每条规则是按照从右到左匹配的。
示例1:
*{ }
*通配符 将匹配所有的元素,浏览器进行渲染的时候需要计算每一个元素,效率最低。
示例2:
ul#nav{ }
在页面中每个指定的id 只能对应一个元素,没必要额外添加限定符,加了反而效率低。同事也不要用具体的标签限定类选择器,而是对类名进行扩展。例如把ul.nav改成.main_nav更好。
示例3:
#ul li{
color:#e5e5e5;
}
了解这方面的知识后,我们知道这个之前看似高效地规则实际开销相当高,浏览器必须遍历页面上每个li元素并确定其父元素的id是否为nav。
小结:
- 避免使用通配规则。如 *{} 计算次数惊人!只对需要用到的元素进行选择
- 尽量少的去对标签进行选择,而是用class。如:#nav li{},可以为li加上nav_item的类名,如下选择.nav_item{}
- 不要去用标签限定ID或者类选择符。如:ul#nav,应该简化为#nav
- 尽量少的去使用后代选择器,降低选择器的权重值。后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素。
- 考虑继承。了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则