高性能CSS（三）

CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间，因此优化选择器的原则是应尽可能避免须要消耗更多匹配时间的选择器。而在这以前咱们须要了解CSS选择器匹配的机制，如例子的子选择器规则：

#header > a {font-weight:blod;}

咱们中的大多数人都是从左到右的阅读习惯，可能也会习惯性的设定浏览器也是从左到右的方式进行匹配规则，由于会推测这条规则的开销并不高。咱们这样假象浏览器会像这样的方式工做：找到惟一的id为header为的元素，而后把这个样式规则应用到直系子元素中的a元素上。咱们知道文档中只有一个id为header的元素，而且它只有几个a类型的子节点，因此这个CSS选择器应该至关高效。

事实上，却刚好相反，CSS选择器是从右到左进行规则匹配。了解这个机制后，例子中看似高效的选择器在实际中的匹配开销是很高的，浏览器必须遍历页面中全部的a元素而且肯定其父元素的id是否为header。

若是把例子的子选择器改成后代选择器则会开销更多，在遍历页面中全部a元素后还需向其上级遍历直到根节点。

#header  a {font-weight:blod;}

理解了CSS选择器从右到左匹配的机制后，能够理解选择器中最右边的规则每每决定了浏览器继续左移匹配的工做量，咱们把最右边选择规则称之为关键选择器。

通配选择器使用 * 符合表示，可匹配文档中的每个元素。以下例规则将全部元素的字体大小设置为20px：

* { font-size:20px;}

通配选择器做用于全部的元素，如规则最右边为通配符：

.selected * {color: red;}

浏览器匹配文档中全部的元素后分别向上逐级匹配class为selected的元素，直到文档的根节点，所以其匹配开销是很是大的，一般比开销最小的ID选择器高出1~3个数量级，因此应避免使用关键选择器是通配选择器的规则。