css選擇器知識(shí)點(diǎn)有哪些
這篇文章主要為大家展示了“css選擇器知識(shí)點(diǎn)有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css選擇器知識(shí)點(diǎn)有哪些”這篇文章吧。
十余年的潞城網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整潞城建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“潞城網(wǎng)站設(shè)計(jì)”,“潞城網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
選擇器的種類(lèi)可以分為三種：標(biāo)簽名選擇器、類(lèi)選擇器，ID選擇器。而所謂的后代選擇器和群組選擇器只不過(guò)是對(duì)前三種選擇器的擴(kuò)展應(yīng)用。
CSS選擇器效率從高到低的排序如下：
1.id選擇器（#myid）
2.類(lèi)選擇器（.myclassname）
3.標(biāo)簽選擇器（div,h2,p）
4.相鄰選擇器（h2+p）
5.子選擇器（ul > li）
6.后代選擇器（li a）
7.通配符選擇器（*）
8.屬性選擇器（a[rel="external"]）
9.偽類(lèi)選擇器（a:hover, li:nth-child）
一般而言，選擇器越特殊，它的優(yōu)先級(jí)越高。也就是選擇器指向的越準(zhǔn)確，它的優(yōu)先級(jí)就越高。
對(duì)于什么情況下使用什么選擇器，用不同選擇器的原則是：
1、準(zhǔn)確的選到要控制的標(biāo)簽；
2、使用最合理優(yōu)先級(jí)的選擇器；
3、HTML和CSS代碼盡量簡(jiǎn)潔美觀。通常：
①最常用的選擇器是類(lèi)選擇器。
②li、td、dd等經(jīng)常大量連續(xù)出現(xiàn)，并且樣式相同或者相類(lèi)似的標(biāo)簽，我們采用類(lèi)選擇器跟標(biāo)簽名選擇器結(jié)合的后代選擇器 .xx li/td/dd {}的方式選擇。
③極少的情況下會(huì)用ID選擇器，當(dāng)然很多前端開(kāi)發(fā)人員喜歡header，footer，banner，conntent設(shè)置成ID選擇器的，因?yàn)橄嗤臉邮皆谝粋€(gè)頁(yè)面里不可能有第二次。
我們的目標(biāo)是高效，簡(jiǎn)介的css
所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時(shí)候盡量進(jìn)行少的查找，其實(shí)瀏覽器CSS匹配不是從左到右進(jìn)行查找，而是從右到左進(jìn)行查找。比如 DIV#divBox p span.red{color:red;}，瀏覽器的查找順序如下：
先查找html中所有class='red'的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。瀏覽器從右到左進(jìn)行查找的好處是為了盡早過(guò)濾掉一些無(wú)關(guān)的樣式規(guī)則和元素。
下面列出一些我們常見(jiàn)的寫(xiě)CSS犯一些低效錯(cuò)誤：
1.盡量不要在ID選擇器和class選擇器前使用標(biāo)簽名
eg：
選擇器舉例
注：但是當(dāng)你的頁(yè)面中定義了多個(gè)叫eg的類(lèi)時(shí)，需要有層級(jí)的寫(xiě)法。
2.盡量少使用層級(jí)關(guān)系
一般寫(xiě)法：#divBox p .red{color:red;}
更好寫(xiě)法：.red{..}
3.使用class代替層級(jí)關(guān)系
一般寫(xiě)法：#divBox ul li a{display:block;}
更好寫(xiě)法：.block{display:block;}
以上是“css選擇器知識(shí)點(diǎn)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前文章：css選擇器知識(shí)點(diǎn)有哪些
瀏覽地址：http://m.jiaotiyi.com/article/gcdpog.html