成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css的選擇器效率分析

firim / 1850人閱讀

摘要：選擇器的最后一部分，也就是選擇器的最右邊在這個(gè)例子中就是部分部分被稱為關(guān)鍵選擇器，它將決定你的選擇器的效率如何是高還是低。因?yàn)樽钣疫叺年P(guān)鍵選擇器是最具體的，也符合上述的選擇器優(yōu)先級順序。

贊助我以寫出更好的文章

如果您覺得文章對您有幫助，可以逐個(gè)點(diǎn)擊以下鏈接，類似于Google ads，不需要您付出任何費(fèi)用，每天都可以來點(diǎn)一次噢，費(fèi)用將由廣告商承擔(dān)，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具有疊加性（同一個(gè)元素被多條樣式規(guī)則指定），繼承性（后代元素會(huì)繼承前輩元素的一些樣式和屬性）和優(yōu)先級 （由于CSS的疊加性和繼承性，將產(chǎn)生優(yōu)先級，這指的是哪條樣式規(guī)則會(huì)最終作用于指定的元素，他只遵循一條規(guī)則，指定的越具體，優(yōu)先級越高）

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

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

一、基本選擇器（標(biāo)簽選擇器、通用選擇器、類和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之間用逗號隔開
E F 包含選擇符，匹配所有被E元素包含的F元素
E>F 子元素選擇器，匹配所有E元素的兒子元素F
E+F 毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F
E~F 匹配任何E標(biāo)簽之后的同級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)簽之后的同級F標(biāo)簽 2.1
E[attribute$=value] 匹配所有attribute屬性值包含有“value”的E元素 3
E[attribute*=value] 匹配所有attribute屬性值是以"value"結(jié)束的E元素 3

四、偽類選擇器

五、偽元素選擇器

選擇器 描述 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》一文中說過“瀏覽器讀取你的選擇器，遵循的原則是從選擇器的右邊到左邊讀取。換句話說，瀏覽器讀取選擇器的順序是由右到左進(jìn)行”。

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

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

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

                id選擇器（#myid）
                類選擇器（.myclassname）
                標(biāo)簽選擇器（div,h1,p）
                相鄰選擇器（h1+p）
                子選擇器（ul > li）
                后代選擇器（li a）
                通配符選擇器（*）
                屬性選擇器（a[rel="external"]）
                偽類選擇器（a:hover,li:nth-child）

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

我們來對比一下這幾個(gè)實(shí)例，看看誰的效率是最高的：

1.  #myId span



  2.  span #myId

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110923.html

相關(guān)文章

  • 從css到頁面樣式渲染

    摘要：對應(yīng)多種語法規(guī)則可以為指定樣式。渲染頁面繪制到屏幕后，頁面結(jié)構(gòu)的改變也有可能導(dǎo)致渲染樹重新計(jì)算，其中重排和重繪是最耗時(shí)的部分。 寫了這么多class,color,background,display...; 也許有時(shí)候會(huì)疑惑，怎么就顯示在頁面上，改變元素的樣式。 本文簡明介紹整個(gè)解析，匹配，渲染過程 css 描述 css 是Cascading Style Sheets的簡寫，是一種樣式...

    Nekron 評論0 收藏0

  • 天天都在使用CSS，那么CSS的原理是什么呢？

    摘要：也有的元素被完全無視，比如的元素。對于每個(gè)元素，必須在所有中找到符合的并將對應(yīng)的規(guī)則進(jìn)行合并。這樣做是為了減少無效匹配次數(shù)，從而匹配快性能更優(yōu)。識別屬性值，創(chuàng)建對象，并將對象存入解釋器堆棧。數(shù)組中的每一項(xiàng)紀(jì)錄了這個(gè)的，的值，權(quán)重層疊規(guī)則。 作為前端，我們每天都在與CSS打交道，那么CSS的原理是什么呢？ 一、瀏覽器渲染 開篇，我們還是不厭其煩的回顧一下瀏覽器的渲染過程，先上圖：show...

    lijy91 評論0 收藏0

  • 天天都在使用CSS，那么CSS的原理是什么呢？

    摘要：也有的元素被完全無視，比如的元素。對于每個(gè)元素，必須在所有中找到符合的并將對應(yīng)的規(guī)則進(jìn)行合并。這樣做是為了減少無效匹配次數(shù)，從而匹配快性能更優(yōu)。識別屬性值，創(chuàng)建對象，并將對象存入解釋器堆棧。數(shù)組中的每一項(xiàng)紀(jì)錄了這個(gè)的，的值，權(quán)重層疊規(guī)則。 作為前端，我們每天都在與CSS打交道，那么CSS的原理是什么呢？ 一、瀏覽器渲染 開篇，我們還是不厭其煩的回顧一下瀏覽器的渲染過程，先上圖：show...

    The question 評論0 收藏0

  • JavaWEB開發(fā)05_Bootstrap

    摘要：類用于寬度，占據(jù)全部視口的容器。通過行在水平方向創(chuàng)建一組列。通過為列設(shè)置屬性，從而創(chuàng)建列與列之間的間隔。 上次課內(nèi)容:什么JQ : write less do more 寫更少的代碼,做更多的事情 javascript函數(shù)庫 基本選擇器: ? ID選擇器: #ID名稱 ? 類選擇器: .類名 ? 元素選擇器: 元素的名稱 ? 通配符選擇器: * 找出頁面上...

    _Dreams 評論0 收藏0

  • JavaWEB開發(fā)05_Bootstrap

    摘要：類用于寬度，占據(jù)全部視口的容器。通過行在水平方向創(chuàng)建一組列。通過為列設(shè)置屬性，從而創(chuàng)建列與列之間的間隔。 上次課內(nèi)容:什么JQ : write less do more 寫更少的代碼,做更多的事情 javascript函數(shù)庫 基本選擇器: ? ID選擇器: #ID名稱 ? 類選擇器: .類名 ? 元素選擇器: 元素的名稱 ? 通配符選擇器: * 找出頁面上...

    coolpail 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<