Multiple Declarations

　　关于 CSS 的 class 声明和定义，也有简写的方式

　　清单 4. Class 的声明

.Class1{position: absolute; left: 20px; top: 30px;}  
.Class2{position: absolute; left: 20px; top: 30px;}  
.Class3{position: absolute; left: 20px; top: 30px;}  
.Class4{position: absolute; left: 20px; top: 30px;}  
.Class5{position: absolute; left: 20px; top: 30px;}  
.Class6{position: absolute; left: 20px; top: 30px;}  
 
 -------------------->>>>>>>  
 
 .class1 .class2 .class3 .class4 .class5 .class6{  
 Position: absolute; left: 20px; top: 20px;  
 }  

　　这种 Class 简写的方式可以极大的缩减我们的代码，提高浏览器分析识别的效率。

　　CSS 选择器 (CSS Selectors)

　　先来看看下面这个例子：

　　清单 5. Child selector

#toc > li {font-weight: bold}  

　　按照我们惯常的理解，编译器应该是先查找 id 为“toc”的节点，然后在他的所有直接子节点中查找类型(tag)为“li”的节点，将“font-weight”属性应用到这些节点上。

　　但是，不幸的是，恰恰相反，浏览器是“从右往左”来分析 class 的，它的匹配规则是从右向左来进行匹配的。这里，浏览器首先会查找页面上所有的“li”节点，然后再去做进一步的判断：如果它的父节点的 id 为“toc”，则匹配成功。

　　由此可知，CSS 选择器的匹配远比我们想象的要慢的多，CSS 的性能问题不容忽视。

　　清单 6. Descendant selector

#toc  li {font-weight: bold} 

　　这个效率比之前的“child selector”效率更慢，而且要慢很多。浏览器先便利所有的“li”节点，然后步步上溯其父节点，直到 DOM 结构的根节点(document)，如果有某个节点的 id 为“toc”，则匹配成功，否则继续查找下一个“li”节点。

　　清单 7. 尽量避免 universal rules

[hidden="true"] { ... } /* A universal rule */   

　　这里的匹配规则很明显：查找页面上的所有节点，如果有节点存在“hidden”属性，并且其属性值为“true”，则匹配成功。这是最耗时耗力的匹配，页面上的所有节点都需要进行匹配运算，这种规则应尽量避免。

　　清单 8. Id-categorized 规则与 tag name 或 class 规则并行

button#goButton {...};----->>#goButton  
.fundation#testIcon {...};----->>#testIcon