8.26日(rì)音(yīn)訊,網頁制(zhì)作(zuò)之選擇♠γ 器(qì)優先級的(de)實際運用(yò®₽↔ng)

　　

 　　8.26日(rì)音(yīn)訊,網頁制(zhì)作(z"<<↑uò)之選擇器(qì)優先級的(de)實際運用(yòng)。嚴格來(lái)講< ±，選擇器(qì)的(de)種類可(kě)以分(f★εēn)為(wèi)三種：标簽名選擇器(qΩ₩ì)、類選擇器(qì)和(hé)ID選擇器(qì)。γα$而所謂的(de)後代選擇器(qì)和(hé)群組選擇₩β↑↕器(qì)隻不(bù)過是(shì)對(duì)前三種選擇器(qì)的(dβ‍π£e)擴展應用(yòng)。而在标簽內(nèi)寫入style=₹ ""的(de)方式，應該是(shì)CSS的(de)一(yī)種引入方$πγ 式，而不(bù)是(shì)選擇器(qì)，因為(w✔÷≥èi)根本就(jiù)沒有(yǒu)用(yòng)到(dà♦•¶o)選擇器(qì)。

 

　　給一(yī)個(gè)p标簽增加一(yī)個(gè)類（cl ‍ass），可(kě)是(shì)執行(xíng)後該class中的(de)£←≤有(yǒu)些(xiē)屬性并沒有(yǒu)起作(zuò)用(yòng₽×)。通(tōng)過Firebug查看(kàn)，發現(xiàn)沒有 ∑∏(yǒu)起作(zuò)用(yòng)的(de)屬性被覆∏®×♥蓋了(le)。這(zhè)個(gè)時(shí)候突然意識到(dào)了§₹(le)CSS選擇器(qì)的(de)優先級問(wèn®↓™Ω)題，這(zhè)裡(lǐ)就(jiù)CSS選擇器(qì)的♥≈(de)優先級問(wèn)題做(zuò)×™α∑了(le)一(yī)些(xiē)總結。

　　選擇器(qì)種類

　　嚴格來(lái)講，選擇器(qì)♦​±∏的(de)種類可(kě)以分(fēn)為(wèi)三種：标簽名選擇器§∏λ(qì)、類選擇器(qì)和(hé)ID選擇器(qγ ♥ì)。而所謂的(de)後代選擇器(qì)和(hé↓×‌∏)群組選擇器(qì)隻不(bù)過是(shì)對 '∞(duì)前三種選擇器(qì)的(de)擴展應用(yòng÷₽✘)。而在标簽內(nèi)寫入style=""的(de)方式，應該§₩₩是(shì)CSS的(de)一(yī)種引≥★入方式，而不(bù)是(shì)選擇器(qì)，因為(wèi)根本就(♦¥α"jiù)沒有(yǒu)用(yòng)到(dào)選擇÷✘☆★器(qì)。而一(yī)般人(rén)們将上(shàng)面這(zhè)幾±≥種方式結合在一(yī)起，所以就(jiù)有(yǒu)了(le)5£<種或6種選擇器(qì)了(le)。

　　三種基本的(de)選擇器(qì)類型

　　語法如(rú)下(xià)：

　　◆标簽名選擇器(qì)，如(rú)：p{↑>←λ}，即直接使用(yòng)HTML标簽作(zuò)為(wèi)≈™選擇器(qì)。

　　◆類選擇器(qì)，如(rú).polaris{}。

　　◆ID選擇器(qì)，如(rú)#polaris{}。

　　注意，ID選擇器(qì)跟類選擇器(qì)≥& ↔有(yǒu)很(hěn)大(dà)的(de)不(bù)同：一(yī)個(gè)≈♥δ頁面內(nèi)不(bù)能(néng)出現(x✔γ"☆iàn)相(xiàng)同的(de)ID；再就(jiù)是(✔>σshì)ID也(yě)是(shì)後台開(kāi)發人(<βrén)員(yuán)會(huì)經常用(yòng)的(de)，所以前端開(kδ₽λ¥āi)發人(rén)員(yuán)應該盡量少(shǎo)的(de)$↓≤使用(yòng)。當然跟後台人(rén)員(yuán)←★®↔的(de)工(gōng)作(zuò)配合十分(fēn)娴熟之後，這(zhè)φ✘☆φ些(xiē)都(dōu)不(bù)會(hu→☆↑ì)成為(wèi)限制(zhì)。

　　擴展選擇器(qì)

　　◆後代選擇器(qì)，如(rú).polarisspa♦≥↕nimg{}，後代選賊器(qì)實際上(s'•₩∞hàng)是(shì)使用(yòng)多(du'≥∑ō)個(gè)選擇器(qì)加上(shàng)中間(jiān)的(d♥♠e)空(kōng)格來(lái)找到(dào)¶•σ具體(tǐ)的(de)要(yào)控制(z↔Ωhì)标簽。

　　◆群組選擇器(qì)，如(rú)p,span,imβ☆g{}，群組選擇器(qì)實際上(shàng₹ )是(shì)對(duì)CSS的(de)一(yī)種簡化(huà)寫法，隻‌∏γ≠不(bù)過把有(yǒu)相(xiàng)同定義的£δ∞&(de)不(bù)同選擇器(qì)放(fàng)在一(yī)起，省了(le↔★ <)很(hěn)多(duō)代碼。

　　選擇器(qì)的(de)優先級别

　　了(le)解了(le)各種選擇器(qì)後，還(hái)有(y>§ ǒu)一(yī)個(gè)重要(yào)≥×↑♥的(de)知(zhī)識點就(jiù)是(shì)CSS選≈©擇器(qì)的(de)優先級。這(zhè)也(∑λ↕yě)就(jiù)是(shì)為(wèi)什(shén)麽polaris會α‌(huì)遇到(dào)文(wén)章(zh‌≤¥σāng)開(kāi)頭的(de)問(wèn)題。邯鄲網站(zhàn)建設來(lái)給大(dà)家(jiā)舉個(gè)簡單的(de)例子(≥‌λzǐ)：

　　beijixingpolaris

如(rú)果已經把.polaris下(xià)面span內(‍γλ>nèi)的(de)字體(tǐ)設置成紅(hóng)色：

　　.polarisspan{color:red;}≤​↓ 這(zhè)時(shí)，如(rú)果要(yào)改變.beij←♠γ<ixing的(de)顔色為(wèi)藍(lán)色，用÷•→♠(yòng)下(xià)面的(de)命令是(shì)不(bù)能(néng↑♣π₹)實現(xiàn)的(de)：

　　.beijixing{color:blu•®e;}出現(xiàn)這(zhè)種情況就(jiù)是(shì)因為(w≤'>★èi)後一(yī)個(gè)命令的(de)優先級不(bù)夠，兩條相∞>Ω®(xiàng)互沖突的(de)樣式設置，浏覽器(qì)隻會(hu¥>®♦ì)執行(xíng)優先級較高(gāo)∏↓的(de)那(nà)個(gè)。

　　那(nà)麽選擇器(qì)的(de)優先級是(shì)怎麽規定的(de•±)呢(ne)？

　　一(yī)般而言，選擇器(qì)越特殊÷•×σ，它的(de)優先級越高(gāo)。也(yě)就(jiù)是(shì) ♣€λ選擇器(qì)指向的(de)越準确，它的(de)優先級就(jiù)越高'★&(gāo)。通(tōng)常我們用(yòng)1表示标簽名選擇器(<×€₹qì)的(de)優先級，用(yòng)10表示類§≥選擇器(qì)的(de)優先級，用(yòng)→λ100标示ID選擇器(qì)的(de)優先級。比如(rú)上(shàng)α↕π例當中.polarisspan{color:red;}的(de↓π¶₹)選擇器(qì)優先級是(shì)10+1也(yě)就(jiù)是(sh↔ ì)11；而.polaris的(de)優先級是(s∏✘hì)10；浏覽器(qì)自(zì)然會(huì)顯示紅(hóng)色的(•₩∞de)字。理(lǐ)解了(le)這(zhè)個(gè)道(dào)理(l​§‌ǐ)之後下(xià)面的(de)優先級計(jì)算λ∏¶(suàn)自(zì)是(shì)易如(rú)反掌：

　　p.test1.spanvar優先級1+10+↔​10+1span#xxx.songsli優先級1+1♦ 00+10+1#xxxli優先級100+1對(duì)于什(shén)麽情≠ 況下(xià)使用(yòng)什(shén)麽選擇器(qì)✘$∏‌，用(yòng)不(bù)同選擇器(qì)的(de)原則是(shì)↔©：第一(yī)：準确的(de)選到(dào)±$≥£要(yào)控制(zhì)的(de)标簽；第二：使用(yòn∏​&g)最合理(lǐ)優先級的(de)選擇器(qì)•∑$∞；第三：HTML和(hé)CSS代碼盡量簡潔美(měi)觀。通♦≤≈(tōng)常：

　　1、最常用(yòng)的(de)選擇器(£₩♥<qì)是(shì)類選擇器(qì)。

　　2、li、td、dd等經常大(dà)量連續出現(xiàn)，并且樣式λ ♠λ相(xiàng)同或者相(xiàng)類似的(de)标簽，我們采用(yòλ↑ng)類選擇器(qì)跟标簽名選擇器(qì)結合的(de)後代選擇÷ 器(qì).xxli/td/dd{}的(de)方Ωα式選擇。

　　3、極少(shǎo)的(de)情況下(xià¶≥↕∏)會(huì)用(yòng)ID選擇器(qì)，當然很(hěn)‍∏•多(duō)前端開(kāi)發人(rén)員(yuán)喜歡header，fo≥©₩oter，banner，conntentβ ε設置成ID選擇器(qì)的(de)，因為(wèi)相(xiε♦€àng)同的(de)樣式在一(yī)個(gè)®♠頁面裡(lǐ)不(bù)可(kě)能(néng)有(yα δǒu)第二次。

　　在這(zhè)裡(lǐ)不(bù)得(de)不(bù)提使用®↑‍(yòng)在标簽內(nèi)引入CSS的(de)±→↕方式來(lái)寫CSS，即：

　　polaris

這(zhè)時(shí)候的(de)優先級是(shì) ☆™×最高(gāo)的(de)。我們給它的(de)優先級是(shì)1000，這(z ₩≥£hè)種寫法不(bù)推薦使用(yòng)，特别是(s₽€ hì)對(duì)新手來(lái)說(shuō)。這(zhè)也($εyě)完全違背了(le)內(nèi)容和(hé)顯示∞‌©♣分(fēn)離(lí)的(de)思想。DIV+CSS的(de©§$ )優點也(yě)不(bù)能(néng)再有(yǒu)‌δ≠任何體(tǐ)現(xiàn)。

　　後代選擇器(qì)的(de)定位原則

　　在這(zhè)裡(lǐ)介紹一(yī)下(x∞‌☆γià)對(duì)于後代選擇器(qì)，浏覽器(φ  qì)是(shì)如(rú)何查找元素的(de)呢(ne)？

　　浏覽器(qì)CSS匹配不(bù)是(shì)從(>>®↓cóng)左到(dào)右進行(xíng)查找，而是(shì)從≠÷(cóng)右到(dào)左進行(xíng)查找。比如(rú)DIV#p  Boxpspan.red{color:red;♥™}，浏覽器(qì)的(de)查找順序如(rú)下(xià)：先​&"λ查找html中所有(yǒu)class='red'的(de)span元→∑Ω素，找到(dào)後，再查找其父輩元素中是(shìβφ•✔)否有(yǒu)p元素，再判斷p的(de)父元素中是(←•®shì)否有(yǒu)id為(wèi)pBox的(de)p元素，如(rú)δπ§果都(dōu)存在則匹配上(shàng)。

　　浏覽器(qì)從(cóng)右到(∏ ↕αdào)左進行(xíng)查找的(de)好(hǎo)處是(shìα₽δ)為(wèi)了(le)盡早過濾掉一(yī)些(x↕<iē)無關的(de)樣式規則和(hé)元素 λ。比如(rú)如(rú)下(xià)html'¥和(hé)css: