這篇文章主要講解了“CSS中的選擇器種類(lèi)介紹及效率的比較”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS中的選擇器種類(lèi)介紹及效率的比較”吧！

成都創(chuàng)新互聯(lián)于2013年創(chuàng)立，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元玉溪做網(wǎng)站,已為上家服務(wù),為玉溪各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

我們都知道，CSS具有疊加性（同一個(gè)元素被多條樣式規(guī)則指定），繼承性（后代元素會(huì)繼承前輩元素的一些樣式和屬性）和優(yōu)先級(jí) （由于CSS的疊加性和繼承性，將產(chǎn)生優(yōu)先級(jí)，這指的是哪條樣式規(guī)則會(huì)最終作用于指定的元素，他只遵循一條規(guī)則，指定的越具體，優(yōu)先級(jí)越高）

由上可知，選擇器指定的越具體，那么他的優(yōu)先級(jí)就越高，

在這里，我們來(lái)總結(jié)一下css的選擇器：

一、基本選擇器（標(biāo)簽選擇器、通用選擇器、類(lèi)和ID選擇器）

選擇器	描述	CSS版本
E	標(biāo)簽選擇器，匹配所有使用E標(biāo)簽的元素
*	通用元素選擇器，匹配任何元素
.info	class選擇器，匹配所有class屬性中包含info的元素
#footer	id選擇器，匹配所有id屬性等于footer的元素

二、多元素的組合選擇器（標(biāo)簽選擇器[群組選擇器]、后代選擇器、子元素選擇器、相鄰選擇器）

選擇器	描述	CSS版本
E，F(xiàn)	多元素選擇器，同時(shí)匹配所有E元素或F元素，E和F之間用逗號(hào)隔開(kāi)
E F	包含選擇符，匹配所有被E元素包含的F元素
E>F	子元素選擇器，匹配所有E元素的兒子元素F
E+F	毗鄰元素選擇器，匹配所有緊隨E元素之后的同級(jí)元素F
E~F	匹配任何E標(biāo)簽之后的同級(jí)F標(biāo)簽

三、屬性選擇器

選擇器	描述	CSS版本
E[attribute]	匹配所有具有attribute屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如“[cheacked]”。以下同。）	2.1
E[attribute=value]	匹配所有attribute屬性等于“value”的E元素	2.1
E[attribute~=value]	匹配所有attribute屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于“value”的E元素	2.1
E[attribute^=value]	匹配任何E標(biāo)簽之后的同級(jí)F標(biāo)簽	2.1
E[attribute$=value]	匹配所有attribute屬性值包含有“value”的E元素	3
E[attribute*=value]	匹配所有attribute屬性值是以"value"結(jié)束的E元素	3

四、偽類(lèi)選擇器

五、偽元素選擇器

選擇器	描述	CSS版本
E:first-line	匹配所有E標(biāo)簽內(nèi)的第一行	2.1
E:first-letter	匹配所有E標(biāo)簽內(nèi)的第一個(gè)字母	2.1
E:before	在E標(biāo)簽之前插入生成的內(nèi)容	2.1
E:after	在E標(biāo)簽之后插入生成的內(nèi)容	2.1

在這里，我們需要知道的是瀏覽器是如何讀取選擇器的。Chris Coyier曾在《Efficiently Rendering CSS》一文中說(shuō)過(guò)“瀏覽器讀取你的選擇器，遵循的原則是從選擇器的右邊到左邊讀取。換句話說(shuō)，瀏覽器讀取選擇器的順序是由右到左進(jìn)行”。

選擇器的最后一部分，也就是選擇器的最右邊（在這個(gè)例子中就是a[title]部分）部分被稱(chēng)為“關(guān)鍵選擇器”，它將決定你的選擇器的效率如何？是高還是低。

那么如何讓關(guān)鍵選擇器更有效，性能化更高呢？其實(shí)很簡(jiǎn)單，主要把握一點(diǎn)“越具體的關(guān)鍵選擇器，其性能越高”

選擇器有一個(gè)固有的效率，我們來(lái)看Steve Souders給排的一個(gè)順序：

                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）
上面九種選擇器的效率是從高到低排下來(lái)的，基中ID選擇器的效率是高，而偽類(lèi)選擇器的效率則是最低的。

我們來(lái)對(duì)比一下這幾個(gè)實(shí)例，看看誰(shuí)的效率是高的：

1.  #myId span
2.  span #myId
由上面的例子，我們可以知道，下面的效率要比上面的高。因?yàn)樽钣疫叺年P(guān)鍵選擇器是最具體的，也符合上述的選擇器優(yōu)先級(jí)順序。

感謝各位的閱讀，以上就是“CSS中的選擇器種類(lèi)介紹及效率的比較”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS中的選擇器種類(lèi)介紹及效率的比較這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

分享文章：CSS中的選擇器種類(lèi)介紹及效率的比較-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)鏈接：http://jinyejixie.com/article10/heego.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站導(dǎo)航、企業(yè)建站、手機(jī)網(wǎng)站建設(shè)、定制開(kāi)發(fā)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)