我們最常使用的有四種選擇方法，
Id規則選取，例如
引用內容
button#button{}
#urlBar[type=”text”] { }
div > p > span#demo{}
class規則選取，例如
引用內容
button.toolbarButton { }
.fancyText { }
menuitem > .menu-left[checked=”true”] { }
Tag規則選取，例如
引用內容
td { }
div > p { }
input[type= ”checkbox”] { }
統配選擇器，例如
引用內容
*
：after
[hidden=”true”]
他們都是從最右邊開始匹配，直到最左邊整個規則結束。
這樣就存在一個問題，比如說最右邊的規則已經能確定你要選取到元素。
那更多的規則匹配就造成了效能上的浪費。
比如說div > p > span#demo{}
div > p > span根本沒有意義。
改進：
ID是唯一的。沒有必要附加多餘的規則。也能精準的配對到。
引用內容
button#button{} -> #button{}
#urlBar[type=”text”] { } -> #urlBar{}
div > p > span#demo{} -> #demo{}
下面應該不會出現<a class=”toolbarButton”></a>所以也可以最佳化。
引用內容
button.toolbarButton { } -> .toolbarButton{}
用過多的規則，不如直接給元素一個class
例如：div > p > span > a{}
可能給a一個特殊表現的。直接寫一個class給a即可。
特殊情況需要特殊對待。
例如有時候要確保頁面結構的乾淨。以便適用後期改版的需要，使用到這種方式。也是可以的。平衡取出一個最佳方案。
使用繼承
#demo .left{text-align:left} ->#demo{text-align:left}
註：原文中使用的XUL.對沒接觸過XUL的同學，可能標籤看起來有點怪，但不難理解。