這篇文章將為大家詳細講解有關怎么編寫高效的CSS選擇符，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網站建設、成都網站設計、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的鹽都網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

首先看一小段 CSS 代碼：

#menus > li { font-size: 14px; }

可能大家都會猜想瀏覽器會使從左到右匹配上面的規(guī)則，我們會想象瀏覽器先找到唯一的 id 為 menus 的元素，然后把樣式應用到其直系子元素 li 元素上。這看起來好像還挺高效的。

但是，事實上，CSS 選擇符是從右到左進行匹配的。所以，上面的這條規(guī)則并不高效，瀏覽器必需遍歷頁面上的每個 li 元素并確定其父元素的 id 是否為 menus。

樣式系統(tǒng)從最右邊的選擇符開始向左匹配規(guī)則。只有當前選擇符的左邊還有其他的選擇符，樣式系統(tǒng)就會繼續(xù)向左移動，直到找到和規(guī)則匹配的元素，或者因為不匹配而退出。

編寫高效的CSS選擇符有以下常用規(guī)則：

一、避免使用通配規(guī)則

除了傳統(tǒng)意義上的通配選擇符之外，我們把相鄰兄弟選擇符、子選擇符、后代選擇符合屬性選擇符都歸納到通配規(guī)則分類下，推薦僅使用 ID、類和標簽選擇符。

二、不要限定 ID 選擇符

在頁面中一個指定的ID只能對應一個元素，所以沒有必要添加額外的限定符。例如，div#header是沒有必要的，應該簡化為#header。

三、不要限定類選擇符

不要用具體的標簽限定類選擇符，而是根據(jù)實際情況對類名進行擴展。例如，把li.chapter改成.li-chapter，或是.list-chapter更好。

四、讓規(guī)則越具體越好

不要試圖編寫像 ol li a 這樣的長選擇符，最好是創(chuàng)建一個像.list-anchor一樣的類，并把它添加到適當?shù)脑厣稀?/p>

五、避免使用后代選擇符

通常處理后代選擇符的開銷時最高的，而使用子選擇符也可以得到想要的結果，并且更加高效。

六、避免使用標簽—子選擇符

如果有像#menus > li > a這樣的基于標簽的子選擇符，那么應該使用一個類來關聯(lián)每個標簽元素，例如.menus-item。

七、質疑子選擇符的所有用途

檢查所有使用子選擇符的地方，然后盡可能用具體的類取代它們。

八、依靠繼承

了解哪些屬性可以通過繼承而來，然后避免對這些屬性重復指定規(guī)則。例如，對列表元素而不是每個列表元素指定list-style-image。請參考繼承屬性的列表來了解每個元素的可繼承的屬性。

css的基本語法是什么

css的基本語法是：1、css規(guī)則由選擇器和一條或多條聲明兩個部分構成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。

關于“怎么編寫高效的CSS選擇符”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。