前端面試題：CSS中的選擇器權重

cppprimer 發布于2019-08-29 17:10 / 2198人閱讀

摘要：第二等代表選擇器，如，權值為。第三等代表類，偽類和屬性選擇器，如，權值為。第五等通配符子選擇器相鄰選擇器等的。第六等繼承的樣式沒有權值。

CSS中選擇器優先級的權重計算

先看一段代碼，如下：

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

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

答案是： brown。

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

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

hello

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

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

權重計算規則

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

第一等：代表內聯樣式，如: style=””，權值為1000。

第二等：代表ID選擇器，如：#content，權值為0100。

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

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

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

第六等：繼承的樣式沒有權值。

計算規則

!important 和內聯樣式style都屬于不講理的那種，

只要存在 !important，!important便具有最高優先級；

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

剩下的 “ID” 、 “類，偽類和屬性” 、 “元素類型和偽元素“ 分別對應權重值（0-a-b-c）中的 a/b/c；計算方法如下：

*               /* 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 */

繼承的樣式沒有權值，比其它任何類型的權值都低。

【參考資料】

CSS selector specificity

云服務器 GPU云服務器 css選擇器基礎選擇器css 面試題棧面試題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114144.html

前端面試題-CSS優先級

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

余學文 2019-08-30 14:09 評論0 收藏0
前端面試題-CSS優先級

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

zorro 2019-08-01 18:41 評論0 收藏0
前端筆試題面試題記錄（下）

摘要：前言接上篇前端筆試題面試題記錄上。默認值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據自身位置進行偏離，當子元素設置，將依據它進行偏離。。前言接上篇前端筆試題面試題記錄（上）。趁清明小長假，把上篇剩下的部分也寫一下，因為最近比較忙這篇已經拖了很久了?，F在剛剛開始銀四了，應該還是有些小伙伴在找工作，時間還不算太晚，希望本篇可以幫到這些小伙伴。個人博客了解一下：obkoro...

Lin_YT 2019-08-30 14:24 評論0 收藏0
前端筆試題面試題記錄（下）

摘要：前言接上篇前端筆試題面試題記錄上。默認值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據自身位置進行偏離，當子元素設置，將依據它進行偏離。。前言接上篇前端筆試題面試題記錄（上）。趁清明小長假，把上篇剩下的部分也寫一下，因為最近比較忙這篇已經拖了很久了?，F在剛剛開始銀四了，應該還是有些小伙伴在找工作，時間還不算太晚，希望本篇可以幫到這些小伙伴。個人博客了解一下：obkoro...

suemi 2019-08-22 16:05 評論0 收藏0
前端開發面試題

摘要：總結了一些優質的前端面試題多數源于網絡，初學者閱后也要用心鉆研其中的原理，重要知識需要系統學習，透徹學習，形成自己的知識鏈。如果需要使用，最好是通過動態給添加屬性值，這樣可以可以繞開以上兩個問題。 markyun 總結了一些優質的前端面試題（多數源于網絡），初學者閱后也要用心鉆研其中的原理，重要知識需要系統學習，透徹學習，形成自己的知識鏈。萬不可投機取巧，只求面試過關是錯誤的！ sho...

roland_reed 2019-08-28 17:51 評論0 收藏0