高效的CSS已經不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在Sky公司工作之時，所感興趣的，關注已久的話題。

有很多人都忘記了，或在簡單的說沒有意識到，CSS在我們手中，既能很高效，也可以變得很低能。這很容易被忘記，尤其是當你意識到你會的太少，CSS代碼效率很低的時候。

下面的規則只真正被應用到那些速度要求很高，有成百上千的DOM元素被繪制在頁面上的大型網站。但是，實踐出真理，這和你是在創建下一個Facebook，還是寫一個本地的展示頁面都沒有關系，多知道一點總是好的。

CSS選擇器：

對我們大多數人來說，CSS選擇器并不陌生。最基本的選擇器是元素選擇器(比如div),ID選擇器(比如#header)還有類選擇器(比如.tweet)。

一些的不常見的選擇器包括偽類選擇器(:hover)，很多復雜的CSS3和正則選擇器，比如：first-child，class ^= “grid-”.

CSS選擇器具有高效的繼承性，引用Steve Souders的話， CSS選擇器效率從高到低的排序如下：

ID選擇器 比如#header
類選擇器 比如.promo
元素選擇器 比如 div
兄弟選擇器 比如 h2 + p
子選擇器 比如 li > ul
后代選擇器 比如 ul a 7. 通用選擇器 比如 *
屬性選擇器 比如 type = “text”
偽類/偽元素選擇器 比如 a:hover

以上引用自Steve Souders的Even Faster網站、

我們不得不提的是，縱使ID選擇器很快、高效，但是它也僅僅如此。從Steve Souders的CSS Test我們可以看出ID選擇器和類選擇器在速度上的差異很小很小。

在Windows系統上的Firefox 6上，我測得了一個簡單類選擇器的（reflow figure）重繪速度為10.9ms，而ID選擇器為12.5ms，所以事實上ID比類選擇器重繪要慢一點點。

ID選擇器和類選擇器在速度上的差異基本上沒有關系。

在一個標簽選擇器(a)的測試上顯示，它比類或ID選擇器的速度慢了很多。在一個嵌套很深的后代選擇器的測試上，顯示數據為440左右！從這里我們可以看出ID/類選擇器 和 元素/后代選擇器中間的差異較大，但是相互之間的差異較小。

注意： 這些數據可能在不同計算機和瀏覽器中間的差異較大。強烈地建議大家在自己的機子上測試一下。

組合選擇器

你可以有一個標準的選擇器比如 #nav，來選擇任何帶有ID為”nav”的元素，或在你可以有一個組合選擇器比如#nav a,來選擇任何在ID為’nav’的元素里面的鏈接元素

此刻，我們讀這些是從左到右的方式。我們是先找到#nav，然后從它的里面找其他元素。但是瀏覽器解析這些不是這樣的：瀏覽器解析選擇器是從右到左的方式。

在我們看來，#nav里面帶了一個a，瀏覽器卻是看到的a在#nav里面。這些細微的差異對選擇器的效率有很大的影響，同時學這些差異也是很有價值的。