讓CSS的查詢匹配原理變高效

尛沫發表於2014-05-15
CSS

常見的CSS也存在一些使用的誤區，接下來介紹一部分CSS的真正匹配原理，首先來看1個簡單的CSS：

DIV#divBox p span.red{color:red;}

按習慣我們對這個CSS的理解是，瀏覽器先查詢id為divBox的DIV元素，當找到後，再找其下的所有p元素，然後再查詢所有span元素，當發現有span的class為red的時候，就應用該style。多麼簡單易懂的原理，可是這個理解卻是完完全全相反、錯誤的。

匹配原理

瀏覽器CSS匹配不是從左到右進行查詢，而是從右到左進行查詢。比如之前說的DIV#divBox p span.red{color:red;}，瀏覽器的查詢順序如下：

先查詢html中所有class='red'的span元素，找到後，再查詢其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。

瀏覽器從右到左進行查詢的好處是為了儘早過濾掉一些無關的樣式規則和元素。比如如下html和css:

<style> 
   DIV#divBox p span.red{color:red;}
<style>
<body>
  <div id="divBox">
      <p><span>s1</span></p>
      <p><span>s2</span></p>
      <p><span>s3</span></p>
      <p><span class='red'>s4</span></p>
  </div>
</body>

如果按從左到右查詢，哪會先查詢到很多不相關的p和span元素。而如果按從左到右的方式進行查詢，則首先就查詢到的元素。Firefox稱這種查詢方式為key selector（關鍵字查詢），所謂的關鍵字就是樣式規則中最後（最右邊）的規則，上面的key就是span.red。

簡潔、高效的CSS

所謂高效的CSS就是讓瀏覽器在查詢style匹配的元素的時候儘量進行少的查詢，下面列出一些我們常見的寫CSS犯的一些低效錯誤：

儘量少使用層級關係

一般寫法：#divBox p .red{color:red;}
更好寫法：.red{..}

不要在ID選擇器前使用標籤名

一般寫法：DIV#divBox
更好寫法：#divBox
解釋： 因為ID選擇器是唯一的，加上div反而增加不必要的匹配。

使用class代替層級關係

一般寫法：#divBox ul li a{display:block;}
更好寫法：.block{display:block;}

不要在class選擇器前使用標籤名

一般寫法：span.red
更好寫法：.red
解釋： 同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css檔案中定義如下：

   p.red{color:red;}
   span.red{color:#ff00ff}

如果是這樣定義的就不要去掉，去掉後就會混淆，不過建議最好不要這樣寫。

本文為Anyforweb技術分享部落格，需要了解網站建設及更多web應用相關資訊，請訪問anyforweb.com。

相關文章