看這一篇就夠了,css選擇器知識匯總

《看這一篇就夠了,css選擇器知識匯總》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、看這?篇就夠了,css選擇器知識匯總對?多技術(shù)?員來說都?較熟悉CSS選擇器，舉?例?來說，假設(shè)給?個(gè)p標(biāo)簽增加?個(gè)類（class），可是執(zhí)?后該class中的有些屬性并沒有起作?。通過Firebug查看，發(fā)現(xiàn)沒有起作?的屬性被覆蓋了，這個(gè)時(shí)候突然意識到了CSS選擇器的優(yōu)先級問題。嚴(yán)格來講，選擇器的種類可以分為三種：標(biāo)簽名選擇器、類選擇器和ID選擇器。?所謂的后代選擇器和群組選擇器只不過是對前三種選擇器的擴(kuò)展應(yīng)?。?在標(biāo)簽內(nèi)寫?style=""的?式，應(yīng)該是CSS的?種引??式，?不是選擇器，因?yàn)楦揪蜎]有?到選擇器。??般?們將上?這?種?式結(jié)合在?起，所以就有了5種或6種選擇器了。

2、最基本的選擇器是元素選擇器(?如div),ID選擇器(?如#header)還有類選擇器(?如.tweet)。?些的不常見的選擇器包括偽類選擇器(:hover)，很多復(fù)雜的CSS3和正則選擇器，?如：first-child，class^=“grid-”。CSS選擇器具有?效的繼承性，引?SteveSouders的話，CSS選擇器效率從?到低的排序如下：1.id選擇器（#myid）2.類選擇器（.myclassname）3.標(biāo)簽選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.?選擇器（ul>li）6.后代選擇器（lia）7.通配符選擇器（*）8.屬性選擇器（a[rel="exter

3、nal"]）9.偽類選擇器（a:hover,li:nth-child）縱使ID選擇器很快、?效，但是它也僅僅如此。從SteveSouders的CSSTest我們可以看出ID選擇器和類選擇器在速度上的差異很?很?。在Windows系統(tǒng)上的Firefox6上，我測得了?個(gè)簡單類選擇器的（reflowfigure）重繪速度為10.9ms，?ID選擇器為12.5ms，所以事實(shí)上ID?類選擇器重繪要慢?點(diǎn)點(diǎn)。ID選擇器和類選擇器在速度上的差異基本上沒有關(guān)系。在?個(gè)標(biāo)簽選擇器(a)的測試上顯?，它?類或ID選擇器的速度慢了很多。在?個(gè)嵌套很深的后代選擇器的測試上，顯?數(shù)據(jù)為440左右！從這?我們可

4、以看出ID/類選擇器和元素/后代選擇器中間的差異較?，但是相互之間的差異較?。選擇器的優(yōu)先級是怎么規(guī)定的呢？?般??，選擇器越特殊，它的優(yōu)先級越?。也就是選擇器指向的越準(zhǔn)確，它的優(yōu)先級就越?。通常我們?1表?標(biāo)簽名選擇器的優(yōu)先級，?10表?類選擇器的優(yōu)先級，?100標(biāo)?ID選擇器的優(yōu)先級。?如上例當(dāng)中.polarisspan{color:red;}的選擇器優(yōu)先級是10+1也就是11；?.polaris的優(yōu)先級是10；瀏覽器?然會(huì)顯?紅?的字。理解了這個(gè)道理之后下?的優(yōu)先級計(jì)算?是易如反掌：div.test1.spanvar優(yōu)先級1+10+10+1span#xxx.songsli優(yōu)先級1

5、+100+10+1#xxxli優(yōu)先級10對于什么情況下使?什么選擇器，?不同選擇器的原則是：1、準(zhǔn)確的選到要控制的標(biāo)簽；2、使?最合理優(yōu)先級的選擇器；3、HTML和CSS代碼盡量簡潔美觀。通常：①最常?的選擇器是類選擇器。②li、td、dd等經(jīng)常?量連續(xù)出現(xiàn)，并且樣式相同或者相類似的標(biāo)簽，我們采?類選擇器跟標(biāo)簽名選擇器結(jié)合的后代選擇器.xxli/td/dd{}的?式選擇。③極少的情況下會(huì)?ID選擇器，當(dāng)然很多前端開發(fā)?員喜歡header，footer，banner，conntent設(shè)置成ID選擇器的，因?yàn)橄嗤臉邮皆?個(gè)頁??不可能有第?次。在這?不得不提使?在標(biāo)簽內(nèi)引?CSS的?式來

6、寫CSS，即：polaris