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個數量級，所以應避免使用關鍵選擇器是通配選擇器的規則。