亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端面試題：CSS中的選擇器權(quán)重

cppprimer / 2271人閱讀

摘要：第二等代表選擇器，如，權(quán)值為。第三等代表類，偽類和屬性選擇器，如，權(quán)值為。第五等通配符子選擇器相鄰選擇器等的。第六等繼承的樣式?jīng)]有權(quán)值。

CSS中選擇器優(yōu)先級的權(quán)重計(jì)算

先看一段代碼，如下：

  
  
 hello

請問上面代碼中，a標(biāo)簽中文字的最終顏色是什么？知道CSS選擇器優(yōu)先級規(guī)則的童鞋都知道，在CSS中優(yōu)先級順序如下：

ID選擇器 > class選擇器 > tag選擇器
所以，上面代碼的顏色，大家都會選擇 #box a{ color: green;} 綠色。這個(gè)答案沒錯(cuò)。 如果我們把這一條規(guī)則從style標(biāo)簽中移除呢，那么a標(biāo)簽文字的顏色應(yīng)該是哪個(gè)？ brown? or gold? Which one?

答案是： brown。

a{color:red} 和 p a {color : yellow;}的優(yōu)先級肯定沒有其它兩項(xiàng)高，不需要考慮。在 [class="box"] a和.box a中，后者的順序比較考后，會覆蓋之前的樣式，所以顏色是brown。

這也許會是一些人的答案，不能不說不對。那么如果這中情況下呢？

  
  
 hello

不用說，大家都知道會使用style="color: red;"屬性定義的顏色，是red。

那么，css所遵從的具體規(guī)則是什么呢？

權(quán)重計(jì)算規(guī)則

第零等：!important， 大過了其它任何設(shè)置。

第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000。

第二等：代表ID選擇器，如：#content，權(quán)值為0100。

第三等：代表類，偽類和屬性選擇器，如.content，權(quán)值為0010。

第四等：代表類型選擇器和偽元素選擇器，如div p，權(quán)值為0001。

第五等：通配符、子選擇器、相鄰選擇器等的。如*、>、+,權(quán)值為0000。

第六等：繼承的樣式?jīng)]有權(quán)值。

計(jì)算規(guī)則

!important 和內(nèi)聯(lián)樣式style都屬于不講理的那種，

只要存在 !important，!important便具有最高優(yōu)先級；

如果不存在 !important，存在style，那么style便具有最高優(yōu)先級；

剩下的 “ID” 、 “類，偽類和屬性” 、 “元素類型和偽元素“ 分別對應(yīng) 權(quán)重值（0-a-b-c）中的 a/b/c；計(jì)算方法如下：

*               /* a=0 b=0 c=0 -> specificity = 0-0-0-0 */
LI              /* a=0 b=0 c=1 -> specificity = 0-0-0-1 */
UL LI           /* a=0 b=0 c=2 -> specificity = 0-0-0-2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity = 0-0-0-3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity = 0-0-1-1 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity = 0-0-1-3 */
LI.red.level    /* a=0 b=2 c=1 -> specificity = 0-0-2-1 */
#x34y           /* a=1 b=0 c=0 -> specificity = 0-1-0-0 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 0-1-0-1 */

繼承的樣式?jīng)]有權(quán)值，比其它任何類型的權(quán)值都低。

【參考資料】

CSS selector specificity

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

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

相關(guān)文章

  • 前端面試題-CSS優(yōu)先級

    摘要：優(yōu)先級是基于不同種類選擇器組成的匹配規(guī)則。但是，在內(nèi)部聲明的選擇器是會影響優(yōu)先級。當(dāng)兩條相互沖突的帶有規(guī)則的聲明被應(yīng)用到相同的元素上時(shí)，擁有更大優(yōu)先級的聲明將會被采用。擴(kuò)展閱讀前端面試題選擇器 一、選擇器優(yōu)先級 瀏覽器通過優(yōu)先級來判斷哪一些屬性值與一個(gè)元素最為相關(guān)，從而在該元素上應(yīng)用這些屬性值。優(yōu)先級是基于不同種類選擇器組成的匹配規(guī)則。 二、優(yōu)先級計(jì)算 優(yōu)先級就是分配給指定的CSS聲明...

    余學(xué)文 評論0 收藏0

  • 前端面試題-CSS優(yōu)先級

    摘要：優(yōu)先級是基于不同種類選擇器組成的匹配規(guī)則。但是，在內(nèi)部聲明的選擇器是會影響優(yōu)先級。當(dāng)兩條相互沖突的帶有規(guī)則的聲明被應(yīng)用到相同的元素上時(shí)，擁有更大優(yōu)先級的聲明將會被采用。擴(kuò)展閱讀前端面試題選擇器 一、選擇器優(yōu)先級 瀏覽器通過優(yōu)先級來判斷哪一些屬性值與一個(gè)元素最為相關(guān)，從而在該元素上應(yīng)用這些屬性值。優(yōu)先級是基于不同種類選擇器組成的匹配規(guī)則。 二、優(yōu)先級計(jì)算 優(yōu)先級就是分配給指定的CSS聲明...

    zorro 評論0 收藏0

  • 前端筆試題面試題記錄（下）

    摘要：前言接上篇前端筆試題面試題記錄上。默認(rèn)值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據(jù)自身位置進(jìn)行偏離，當(dāng)子元素設(shè)置，將依據(jù)它進(jìn)行偏離。。 前言 接上篇前端筆試題面試題記錄（上）。趁清明小長假，把上篇剩下的部分也寫一下，因?yàn)樽罱容^忙這篇已經(jīng)拖了很久了?，F(xiàn)在剛剛開始銀四了，應(yīng)該還是有些小伙伴在找工作，時(shí)間還不算太晚，希望本篇可以幫到這些小伙伴。 個(gè)人博客了解一下：obkoro...

    Lin_YT 評論0 收藏0

  • 前端筆試題面試題記錄（下）

    摘要：前言接上篇前端筆試題面試題記錄上。默認(rèn)值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據(jù)自身位置進(jìn)行偏離，當(dāng)子元素設(shè)置，將依據(jù)它進(jìn)行偏離。。 前言 接上篇前端筆試題面試題記錄（上）。趁清明小長假，把上篇剩下的部分也寫一下，因?yàn)樽罱容^忙這篇已經(jīng)拖了很久了?，F(xiàn)在剛剛開始銀四了，應(yīng)該還是有些小伙伴在找工作，時(shí)間還不算太晚，希望本篇可以幫到這些小伙伴。 個(gè)人博客了解一下：obkoro...

    suemi 評論0 收藏0

  • 前端開發(fā)面試題

    摘要：總結(jié)了一些優(yōu)質(zhì)的前端面試題多數(shù)源于網(wǎng)絡(luò)，初學(xué)者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學(xué)習(xí)，透徹學(xué)習(xí)，形成自己的知識鏈。如果需要使用，最好是通過動(dòng)態(tài)給添加屬性值，這樣可以可以繞開以上兩個(gè)問題。 markyun 總結(jié)了一些優(yōu)質(zhì)的前端面試題（多數(shù)源于網(wǎng)絡(luò)），初學(xué)者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學(xué)習(xí)，透徹學(xué)習(xí)，形成自己的知識鏈。萬不可投機(jī)取巧，只求面試過關(guān)是錯(cuò)誤的！ sho...

    roland_reed 評論0 收藏0

發(fā)表評論

0條評論

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