CSS 規則的撰寫是會影響到效能的，不過實際上瀏覽器花在 CSS 上面的時間並不會太多，以我的部落格為例：

只花了 1.830 ms 而已。雖然如此，了解一下還是好的。

還記得上一篇文章裡面有這一段 CSS code 嗎？

body { font-size: 16px }
p { font-size: 20px }
p div { display: none }
img { float: right }

讓我們補上 HTML :

        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link href="style.css" rel="stylesheet">
        <title>Just a Test Page</title>
      
      
        <p>
         hello this is p.
         <div>hi this is div</div>
         <img src="test.jpg" />
        </p>
      

首先，讓我們來個小測驗（請先思考再繼續往下看解答）：上面的 CSS rule 中，第三和第四條，哪一條規則瀏覽器會花比較少時間處理呢？

---- 思考一下 ----

解答：或許你會覺得是第三條，因為這一條規則比較明確，然而實際並非如此，第四條所花費的功夫較少。為什麼呢？

瀏覽器檢查是否匹配規則，是由右至左進行的，因此以第三條規則來說，瀏覽器會先查看是否匹配 div 這個 tag ，若匹配就會再往上確認其祖先是否為 p ，因此所花費的步驟比起第四條來得多。

如果你對於瀏覽器為什麼是由右至左而不是由左至右檢查是否匹配感到好奇的話，可以參考這則 Stack Overflow 的解答：Why do browsers match CSS selectors from right to left?

另外若你想更深入了解關於瀏覽器如何檢查有否匹配 CSS 選擇器的部分的話，可以讀以下兩篇文章，第一篇比較舊，請對照第二篇一起閱讀：

1. Writing efficient CSS
2. CSS Selector Performance has changed! (For the better)