怎樣高效的使用CSS選擇符

來源:互聯網
上載者:User
這次給大家帶來怎樣高效的使用CSS選擇符,高效使用CSS選擇符的注意事項有哪些,下面就是實戰案例,一起來看一下。

最初寫CSS的時候,覺得很簡單,寫得天馬行空。後來慢慢的發現,沒有規則的瞎寫,雖然也能實現效果,但是在實際開發中可能會多做無用功或是重複做功,並且CSS並不高效。於是後期開發時就特意按照一定的規則,儘可能的寫出高效的,可複用的CSS,總結一下,主要是是以下幾個方面。

首先看一小段 CSS 代碼:

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

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

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

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

編寫高效的CSS選擇符有以下常用規則:

一、避免使用通配規則

除了傳統意義上的通配選擇符之外,我們把相鄰兄弟選擇符、子選擇符、後代選擇符合屬性選擇符都歸納到通配規則分類下,推薦僅使用 ID、類和標籤選擇符。

二、不要限定 ID 選擇符

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

三、不要限定類選擇符

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

四、讓規則越具體越好

不要試圖編寫像 ol li a 這樣的長選擇符,最好是建立一個像.list-anchor一樣的類,並把它添加到適當的元素上。

五、避免使用後代選擇符

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

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

如果有像#menus > li > a這樣的基於標籤的子選擇符,那麼應該使用一個類來關聯每個標籤元素,例如.menus-item。

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

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

八、依靠繼承

瞭解哪些屬性可以通過繼承而來,然後避免對這些屬性重複指定規則。例如,對列表元素而不是每個列表元素指定list-style-image。請參考繼承屬性的列表來瞭解每個元素的可繼承的屬性。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

CSS3做出條紋大背景

css3做出半圓弧線

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.