高效css的写法

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

1 selector的性能排序

   id selector > class selector > tag selector > universive selector

so,key selector 决定了css 规则的性能

2 少些css rule，学习规则是可以继承的

不能继承的属性：比如border,margin,padding之类的是不会被继承的

3 避免使用后代选择器，特别是包含了一些无用的祖先元素

eg：body ul li a{...} 制定了一个无用的body限定，因为所有的元素都是在body中。

4 使用class选择器取代后代选择器

eg：如果你需要两个不同的样式（一个无序列表，一个有序列表）

不要使用下面的样式

ul li {color:blue} ol li {color:red} 

应该这样的使用 .unordered-list-item {color: blue;}

     .ordered-list-item {color: red;}

如果你一定要用后代选择器，建议你使用子选择器

5 避免使用:hover在一些没有连接的元素上面（对于ie序列的） 

如果你使用：hover在一些无连接的元素上面，ie7,8会认为他们是无用的。建议使用事件onmouseover 来模拟

背景知识：

下面的这些规则被认为是低效的 

（1）使用了后代选择器

1.使用全局选择器作为key 

eg:body * {...}
.hide-scrollbars * {...} 

2.使用了标签选择器作为key

eg：ul li a {...}

     #footer h3 {...} 

（2）使用子选择器和相邻选择器

1.使用全局选择器作为key

eg:body > * {...}
.hide-scrollbars > * {...} 

2.使用标签选择器作为key

eg: ul > li > a {...}

 

       #footer > h3 {...}