|
今天在google reader上看到一篇博文，然后在問了組里的幾位同事之后才發(fā)現(xiàn)自己曾經(jīng)一直對css selector的理解存在著誤區(qū)。據(jù)說老外的文章中很早就提到了關(guān)于css selector是優(yōu)先級算法，只是到了國內(nèi)被部分人員翻譯之后，誤解了其中的含義，導(dǎo)致現(xiàn)在很多人以為css選擇符的優(yōu)先級運(yùn)算是將ID名、類名等等全部相加后做比較的。
這樣認(rèn)為的人，其中一個(gè)就是我，而今天我才真正認(rèn)識(shí)到這個(gè)css選擇符的運(yùn)用。不知道自己的那本《CSS那些事兒》有沒有提到，如果有的話，我估計(jì)很有可能也是那種錯(cuò)誤的理解，在這里小志對各位讀者朋友表示十分的抱歉。
在這里也感謝小繁的blog中提到了這個(gè)選擇符的問題，然后小志我有機(jī)會(huì)明白，更感謝組內(nèi)的同事分享。
這篇博文命名為《CSS Selector的優(yōu)先級》，主要是圍繞“11個(gè)class與1個(gè)id”的話題展開的，具體的小志就在這里就不再啰嗦，大家可以點(diǎn)擊上面的鏈接直接瀏覽。簡單的來說就是這樣的，一個(gè)擁有id名和class名的div被十個(gè)div包含著，然后樣式是：
.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11{color:red;}
#b{color:green;}
HTML結(jié)構(gòu)比較長，如下：
<div class="a1"><div class="a2"><div class="a3"><div class="a4"><div class="a5"><div class="a6"><div class="a7"><div class="a8"><div class="a9"><div class="a10">
<div class="a11" id="b">
CSS Selector的優(yōu)先級
</div>
</div></div></div></div></div></div></div></div></div></div>
按照以往的理解，都說css中的class是10，id是100，然后腦袋中很自然地就想到，11個(gè)class的話，那么不就是110了嘛。這樣就一定會(huì)比id要大了，最終的顏色應(yīng)該是紅色，但其實(shí)不然，最終的顏色是綠色，是那個(gè)id的顏色。
當(dāng)時(shí)看到這個(gè)我表示十分納悶，然后看文中的介紹又是一頭霧水，后來經(jīng)過組內(nèi)同事指導(dǎo)以及個(gè)人心中對自我很嚴(yán)重的BS之后，終于明白了為什么會(huì)這樣。其實(shí)當(dāng)時(shí)在看一些書籍的時(shí)候，其中介紹到的那些1和0組成的數(shù)字，其實(shí)僅僅只是1和0而已，并不是1000、100、10、1之類。
引用一下小繁的blog的圖片。
在圖中可以看到，一個(gè)id選擇符時(shí)是0,1,0,0，然后兩個(gè)id的選擇符則是0,2,0,0，以此類推，每增加一個(gè)id選擇符的話，那么就是代表左起第二個(gè)數(shù)字會(huì)遞增，僅僅只是這個(gè)數(shù)字在增加而已。同理，使用class的選擇符也是一樣的。那么回到前面提到的“11個(gè)class與1個(gè)id”的問題，用這樣的方式計(jì)算結(jié)果就是：
- 1個(gè)id時(shí)：0,1,0,0
- 11個(gè)class時(shí)：0,0,11,0
擴(kuò)展閱讀：http://www.cssforest.org/blog/index.php?id=164
顯然，這個(gè)問題中id的樣式肯定會(huì)出現(xiàn)，而class的樣式不會(huì)出現(xiàn)。緊記這次的教訓(xùn)，以后多花點(diǎn)時(shí)間去看老外的文章，以及去鞏固和更好地掌握基礎(chǔ)知識(shí)。這一年來，心態(tài)上一直都在迷失著，太隨性了。目標(biāo)和方向經(jīng)常被自己遺忘，經(jīng)常經(jīng)歷這樣的事情對個(gè)人而言是好事，可以很清晰地看到自己的不足，然后進(jìn)行彌補(bǔ)！
最后對自己說一句：繼續(xù)加油，小志！
原文：http://blog.linxz.de/about_css_selector/
本文鏈接：http://www.95time.cn/tech/web/2011/8388.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
