摘要：最基本的元素選擇器比如選擇器比如類(lèi)選擇器比如在代碼中常常用到，還有一些偶爾用到的兄弟選擇器比如子選擇器比如通用選擇器。顯然，關(guān)鍵選擇器中類(lèi)選擇器會(huì)比標(biāo)簽選擇器匹配更少的元素，瀏覽器能夠更快的找到它們并渲染。

在HTML 5中，為了解決文檔結(jié)構(gòu)不夠清晰、明確，追加了很多跟結(jié)構(gòu)相關(guān)的元素。

header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來(lái)放置整個(gè)頁(yè)面或頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，但也可以包含其他內(nèi)容，例如數(shù)據(jù)表格、搜索表單或相關(guān)的LOGO圖片。

nav元素是一個(gè)可以用來(lái)作為頁(yè)面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其他頁(yè)面或當(dāng)前頁(yè)面的其他部分。

main元素表示網(wǎng)頁(yè)中的主要內(nèi)容。主要內(nèi)容區(qū)域指與網(wǎng)頁(yè)標(biāo)題或應(yīng)用程序中本頁(yè)面主要功能直接相關(guān)或進(jìn)行擴(kuò)展的內(nèi)容。

section元素用來(lái)對(duì)網(wǎng)站或應(yīng)用程序中頁(yè)面上的內(nèi)容進(jìn)行分塊，一個(gè)section元素通常由內(nèi)容及其標(biāo)題組成。

article元素代表文檔、頁(yè)面或應(yīng)用程序中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容。

aside元素用來(lái)表示當(dāng)前頁(yè)面或文章的附屬信息部分，它可以包含當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條，以及其他類(lèi)似的有別于主要內(nèi)容的部分。

footer元素可以作為其上層父級(jí)內(nèi)容區(qū)塊或一個(gè)根區(qū)塊的腳注。footer通常包括其相關(guān)區(qū)塊的腳注信息，如作者、相關(guān)閱讀鏈接以及版權(quán)信息等。

由于IE8及更早的IE瀏覽器不能解析HTML 5新增的結(jié)構(gòu)元素，所以需要通過(guò)document.createElement來(lái)創(chuàng)建并設(shè)置默認(rèn)樣式display:block來(lái)進(jìn)行兼容處理。還有更簡(jiǎn)單的辦法就是引入html5shiv，其原理類(lèi)似。

IE瀏覽器需要respond.js配合才能實(shí)現(xiàn)對(duì)媒體查詢(xún)（media query）的支持。

但是，要注意以下幾點(diǎn)：

respond.js與跨域css的問(wèn)題需要額外做一些跨域的配置。

respond.js不能在通過(guò)file://協(xié)議訪問(wèn)的頁(yè)面上發(fā)揮正常的功能，務(wù)必通過(guò)http（https）協(xié)議訪問(wèn)頁(yè)面。

respond.js不支持@import引入的css文件。

上面的方案解決了HTML 5新增結(jié)構(gòu)元素和媒體查詢(xún)的兼容問(wèn)題，與此同時(shí)，盡量直接讓IE瀏覽器運(yùn)行最新的渲染模式。

如果是國(guó)內(nèi)的瀏覽器，一般都同時(shí)支持兼容模式（IE內(nèi)核）和高速模式（webkit內(nèi)核），可以通過(guò)以下方式讓國(guó)產(chǎn)瀏覽器默認(rèn)采用高速模式渲染頁(yè)面。

在使用HTML 5新增結(jié)構(gòu)標(biāo)簽的過(guò)程中，新的結(jié)構(gòu)標(biāo)簽?zāi)軌蜉^快的布局出頁(yè)面骨架（skeleton），HTML代碼的可讀性和清晰度大大的提高，但是它們僅限于幫助構(gòu)建文檔概要的語(yǔ)義部分，如果是樣式容器還是繼續(xù)使用div。

    

        

            
title
            
abstract
        
        
content
        

            
comments
            

                

                    

                    
username
                
                
content
            
            

                

                    

                    
username
                
                
content
            
        
    

對(duì)我們大多數(shù)人來(lái)說(shuō)，CSS選擇器并不陌生。最基本的元素選擇器（比如div）、ID選擇器（比如#id）、類(lèi)選擇器（比如.class）在CSS代碼中常常用到，還有一些偶爾用到的兄弟選擇器（比如h2+p）、子選擇器（比如ul>li）、通用選擇器（*）。諸多的選擇器類(lèi)型導(dǎo)致選擇同一個(gè)DOM元素的選擇器會(huì)有多種，至于選擇哪種，可以從高效的角度考慮來(lái)形成平時(shí)編寫(xiě)CSS選擇器的規(guī)范。

單個(gè)CSS選擇器的效率從高到低的排序如下：

ID選擇器（#id）

類(lèi)選擇器（.class）

元素選擇器（div）

兄弟選擇器（h2+p）

子選擇器（ul>li）

后代選擇器（ul li a）

通配符選擇器（*）

屬性選擇器（type="text"）

偽類(lèi)/偽元素選擇器（a:hover）

然而在實(shí)際應(yīng)用場(chǎng)景中，更多用到是的組合選擇器。組合選擇器在被瀏覽器解析的時(shí)候是從右到左的方式，所以組合選擇器里最右邊的選擇器（關(guān)鍵選擇器）在效率方面起決定性作用，這樣就可以根據(jù)單個(gè)選擇器的效率選擇在關(guān)鍵選擇器處使用哪種類(lèi)型的選擇器了。

#links a {...}
#links a.link {...}

顯然，關(guān)鍵選擇器中a.link類(lèi)選擇器會(huì)比a標(biāo)簽選擇器匹配更少的元素，瀏覽器能夠更快的找到它們并渲染。

html body .wrapper #nav li a {...}

但是，要避免像上面這樣過(guò)度限制選擇器，否則瀏覽器將花費(fèi)更多的時(shí)間。