posts - 36, comments - 419, trackbacks - 0, articles - 0
            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理


          DIV#divBox p span.red{color:red;},按習(xí)慣我們對這個CSS 的理解是,瀏覽器先查找id為divBox的DIV元素,當(dāng)找到后,再找其下的所有p元素,
          然后再查找所有span元素,當(dāng)發(fā)現(xiàn)有span的class為red的時候,就應(yīng)用該style。多么簡單易懂的原理,可是這個理解卻是完完全全相反、錯誤的。

          用了這么多年的CSS,現(xiàn)在才明白CSS的真正匹配原理,不知道你是否也跟我一樣?看1個簡單的CSS:

          DIV#divBox p span.red{color:red;},按習(xí)慣我們對這個CSS 的理解是,瀏覽器先查找id為divBox的DIV元素,當(dāng)找到后,再找其下的所有p元素,然后再查找所有span元素,當(dāng)發(fā)現(xiàn)有span的class為red的時候,就應(yīng)用該style。多么簡單易懂的原理,可是這個理解卻是完完全全相反、錯誤的。


          匹配原理:

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

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

              瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。比如如下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>
          如果按從左到右查找,哪會先查找到很多不相關(guān)的p和span元素。而如果按從左到右的方式進行查找,則首先就查找到<span class='red'>的元素。firefox稱這種查找方式為key selector(關(guān)鍵字查詢),所謂的關(guān)鍵字就是樣式規(guī)則中最后(最右邊)的規(guī)則,上面的key就是span.red。

          簡潔、高效的CSS:
                所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時候盡量進行少的查找,下面列出一些我們常見的寫CSS犯一些低效錯誤(也是我以前常常犯的錯誤,還老以為這樣寫才是高效的):
             
            1.不要在ID選擇器前使用標簽名
           一般寫法:DIV#divBox
           更好寫法:#divBox
           解釋: 因為ID選擇器是唯一的,加上div反而增加不必要的匹配。
            
            2.不要再class選擇器前使用標簽名
           一般寫法:span.red
           更好寫法:.red
           解釋: 同第一條,但如果你定義了多個.red,而且在不同的元素下是樣式不一樣,則不能去掉,比如你css文件中定義如下:
               p.red{color:red;}
               span.red{color:#ff00ff}
               如果是這樣定義的就不要去掉,去掉后就會混淆,不過建議最好不要這樣寫
            3.盡量少使用層級關(guān)系
           一般寫法:#divBox p .red{color:red;}      
           更好寫法:.red{..}
            
            4.使用class代替層級關(guān)系
           一般寫法:#divBox ul li a{display:block;}      
           更好寫法:.block{display:block;}




              有需要請查看:高性能WEB開發(fā)系列



          [作者]:BearRui(AK-47)
          [博客]: http://www.aygfsteel.com/bearrui/
          [聲明]:本博所有文章版權(quán)歸作者所有(除特殊說明以外),轉(zhuǎn)載請注明出處.
          英雄,別走啊,幫哥評論下:  

          精彩推薦 好文要頂 水平一般 看不懂 還需努力

          評論

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2010-06-08 08:43 by BeanSoft
          學(xué)習(xí) 收藏了

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2010-06-08 08:49 by BearRui(AK-47)
          @BeanSoft
          謝謝老大支持啊,^_^

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2010-06-08 16:57 by BearRui(AK-47)
          @愛之谷
          謝謝收藏

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2010-06-08 17:05 by 16樓
          實用,總結(jié)的不賴

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2010-06-08 17:07 by BearRui(AK-47)
          謝謝

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2010-06-09 16:48 by panasia
          很實用的例子。。學(xué)習(xí)了。。

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2010-06-12 17:58 by Aidan
          好文章,頂一下!

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2010-06-12 20:23 by BearRui(AK-47)
          謝謝樓上的支持

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2010-06-16 20:31 by 向東而立
          ( 不要再class選擇器前使用標簽名
          一般寫法:span.red
          更好寫法:.red
          解釋: 同第一條....)
          要再class選擇器前使用標簽名!
          class,表示一組(類)或一個具有同樣性質(zhì)的元素,它們可以共用樣式,并且在頁面中將會出現(xiàn)多次(如果他能唯一,那么要ID又是什么)
          所以CSS選擇器選擇class時,沒有標簽名,選擇將是所以的類的集合...

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2010-06-16 21:31 by BearRui(AK-47)
          @向東而立
          class當(dāng)然唯一是表示在產(chǎn)品中所有唯一,比如.red就表示所有的文字顏色為紅色,并不是跟id一樣的含義。

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2010-06-17 10:07 by tony徐
          簡單實用啊,現(xiàn)在才發(fā)現(xiàn)原來是倒著匹配的

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效[未登錄]  回復(fù)  更多評論   

          2010-06-20 19:42 by kkk
          的確,倒著查找是單鏈,順次查找是多鏈

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2010-09-23 18:14 by jsonz
          當(dāng)時我就精呆啦。

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2010-11-18 14:15 by Ace.lee
          4.使用class代替層級關(guān)系
          一般寫法:#divBox ul li a{display:block;}
          更好寫法:.block{display:block;}

          首先,這個原理。俺還真是現(xiàn)在才知道。大部分觀點表示贊同。
          前面3點總結(jié)來說,就是在能正確實現(xiàn)樣式的情況下,層級盡可能少。
          第4點有點疑問。雖然用class代替層級減少了匹配的時間,但是,class多用一個就多了一個額外的資源開銷,通常,提倡的是盡可能少用類和ID,從這個方面來說,是否是就是因為類和ID的開銷超過了匹配所浪費的資源??

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2010-12-17 13:55 by nicolas
          是的,一直以為也是從左至右的,直到有次面試,面試官問了我CSS的優(yōu)化,我才知道,原來一直習(xí)慣的span.classname{}反而比.classname{}的性能差,CSS的遍歷是從右向左的。支持!

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2011-05-16 00:06 by hax
          知其然不知其所以然。瀏覽器為什么要這樣匹配?不就是為了優(yōu)化CSS匹配的性能?而web開發(fā)者為啥要優(yōu)化css的寫法?這不是浪費了瀏覽器實現(xiàn)者的苦心么?css selector你該怎么寫就應(yīng)該怎么寫。首先考慮的應(yīng)該是這條規(guī)則想要表達什么,而不是是否能快20ms(實際上在通常的case里根本快不了20ms)。

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2011-06-12 21:32 by 水煮丫軟件
          而如果按從左到右的方式進行查找,則首先就查找到<span class='red'>的元素。

          樓主,上面這句話好像有點問題,應(yīng)該是而如果按從右到左的方式進行查找

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2011-08-18 16:31 by wangjie
          老大不看你這篇文章我還以為我寫的css都是高效的呢

          # ID選擇器前究竟用不用用標簽名?  回復(fù)  更多評論   

          2013-04-11 17:31 by 森-pirate
          我現(xiàn)在在做一個頁面,出現(xiàn)的問題就是如果id選擇器不設(shè)置標簽div的話,選擇器內(nèi)所設(shè)置的效果就無效。
          div#llinks ul {
          list-style: none;
          padding: 0px;
          margin: 5px 5px 0px 25px;
          }
          div#llinks ul li {
          float: left; /* 顯示為同一行,如果不加div浮動無效 */
          width: 80px; /* 指定每一項的寬度 */
          background: none;
          padding: 0px;
          border: none;
          }

          # re: 了解CSS的查找匹配原理,讓CSS更簡潔、高效  回復(fù)  更多評論   

          2013-06-07 16:52 by 漂流的兔子
          寫的很清楚 很受用 學(xué)習(xí)了
          主站蜘蛛池模板: 东方市| 宝清县| 屏南县| 仪征市| 长沙市| 澎湖县| 卓尼县| 通渭县| 东港市| 永兴县| 自治县| 股票| 武夷山市| 冀州市| 顺义区| 耿马| 九江县| 杭锦后旗| 抚远县| 宜宾县| 汝州市| 望奎县| 郓城县| 涟水县| 平谷区| 泾源县| 永州市| 高淳县| 元朗区| 德州市| 宁陕县| 兴文县| 栾城县| 宁南县| 舟山市| 治县。| 凤冈县| 青浦区| 安达市| 德清县| 达孜县|