css的選擇器效率分析

贊助我以寫出更好的文章

若是您以爲文章對您有幫助，能夠逐個點擊如下連接，相似於Google ads，不須要您付出任何費用，天天均可以來點一次噢，費用將由廣告商承擔，give me a cup of coffee?

https://app.codesponsor.io/li...

https://app.codesponsor.io/li...

https://app.codesponsor.io/li...

https://app.codesponsor.io/li...

https://app.codesponsor.io/li...

---

咱們都知道，CSS具備疊加性（同一個元素被多條樣式規則指定），繼承性（後代元素會繼承前輩元素的一些樣式和屬性）和優先級 （因爲CSS的疊加性和繼承性，將產生優先級，這指的是哪條樣式規則會最終做用於指定的元素，他只遵循一條規則，指定的越具體，優先級越高）

由上可知，選擇器指定的越具體，那麼他的優先級就越高，

在這裏，咱們來總結一下css的選擇器：

1、基本選擇器（標籤選擇器、通用選擇器、類和ID選擇器）

選擇器	描述	CSS版本
E	標籤選擇器，匹配全部使用E標籤的元素
*	通用元素選擇器，匹配任何元素
.info	class選擇器，匹配全部class屬性中包含info的元素
#footer	id選擇器，匹配全部id屬性等於footer的元素

2、多元素的組合選擇器（標籤選擇器[羣組選擇器]、後代選擇器、子元素選擇器、相鄰選擇器）

選擇器	描述	CSS版本
E，F	多元素選擇器，同時匹配全部E元素或F元素，E和F之間用逗號隔開
E F	包含選擇符，匹配全部被E元素包含的F元素
E>F	子元素選擇器，匹配全部E元素的兒子元素F
E+F	毗鄰元素選擇器，匹配全部緊隨E元素以後的同級元素F
E~F	匹配任何E標籤以後的同級F標籤

3、屬性選擇器

選擇器	描述	CSS版本
E[attribute]	匹配全部具備attribute屬性的E元素，不考慮它的值。（注意：E在此處能夠省略，好比「[cheacked]」。如下同。）	2.1
E[attribute=value]	匹配全部attribute屬性等於「value」的E元素	2.1
E[attribute~=value]	匹配全部attribute屬性具備多個空格分隔的值、其中一個值等於「value」的E元素	2.1
E[attribute^=value]	匹配任何E標籤以後的同級F標籤	2.1
E[attribute$=value]	匹配全部attribute屬性值包含有「value」的E元素	3
E[attribute*=value]	匹配全部attribute屬性值是以"value"結束的E元素	3

4、僞類選擇器

5、僞元素選擇器

選擇器	描述	CSS版本
E:first-line	匹配全部E標籤內的第一行	2.1
E:first-letter	匹配全部E標籤內的第一個字母	2.1
E:before	在E標籤以前插入生成的內容	2.1
E:after	在E標籤以後插入生成的內容	2.1

在這裏，咱們須要知道的是瀏覽器是如何讀取選擇器的。Chris Coyier曾在《Efficiently Rendering CSS》一文中說過「瀏覽器讀取你的選擇器，遵循的原則是從選擇器的右邊到左邊讀取。換句話說，瀏覽器讀取選擇器的順序是由右到左進行」。

選擇器的最後一部分，也就是選擇器的最右邊（在這個例子中就是a[title]部分）部分被稱爲「關鍵選擇器」，它將決定你的選擇器的效率如何？是高仍是低。

那麼如何讓關鍵選擇器更有效，性能化更高呢？其實很簡單，主要把握一點「越具體的關鍵選擇器，其性能越高」

選擇器有一個固有的效率，咱們來看Steve Souders給排的一個順序：

id選擇器（#myid）
                類選擇器（.myclassname）
                標籤選擇器（div,h1,p）
                相鄰選擇器（h1+p）
                子選擇器（ul > li）
                後代選擇器（li a）
                通配符選擇器（*）
                屬性選擇器（a[rel="external"]）
                僞類選擇器（a:hover,li:nth-child）

上面九種選擇器的效率是從高到低排下來的，基中ID選擇器的效率是最高，而僞類選擇器的效率則是最低的。

咱們來對比一下這幾個實例，看看誰的效率是最高的：

1.  #myId span

<br/>

2.  span #myId

由上面的例子，咱們能夠知道，下面的效率要比上面的高。由於最右邊的關鍵選擇器是最具體的，也符合上述的選擇器優先級順序。