最常用的網頁設計有四種選擇方法：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一個特殊表現的網頁設計。直接給a寫一個class即可。特殊情況需要特殊對待。比如有時候要保證頁面結構的網頁設計乾淨。以便適用後期改版的網頁設計需要，使用到這種方式。也是可以的網頁設計。平衡取出一個最佳方案。
使用繼承 程序代碼#demo .left{text-align:left} ->#demo{text-align:left}註：原文中使用的網頁設計XUL，對沒接觸過XUL的網頁設計同學，可能標籤看起來有點怪，但不難理解。