資訊專欄INFORMATION COLUMN
摘要：第二等代表選擇器，如，權(quán)值為。第三等代表類，偽類和屬性選擇器，如，權(quán)值為。第五等通配符子選擇器相鄰選擇器等的。第六等繼承的樣式?jīng)]有權(quán)值。
CSS中選擇器優(yōu)先級(jí)的權(quán)重計(jì)算
先看一段代碼，如下：
請(qǐng)問(wèn)上面代碼中，a標(biāo)簽中文字的最終顏色是什么？知道CSS選擇器優(yōu)先級(jí)規(guī)則的童鞋都知道，在CSS中優(yōu)先級(jí)順序如下：
ID選擇器 > class選擇器 > tag選擇器
所以，上面代碼的顏色，大家都會(huì)選擇 #box a{ color: green;} 綠色。這個(gè)答案沒(méi)錯(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)先級(jí)肯定沒(méi)有其它兩項(xiàng)高，不需要考慮。在 [class="box"] a和.box a中，后者的順序比較考后，會(huì)覆蓋之前的樣式，所以顏色是brown。
這也許會(huì)是一些人的答案，不能不說(shuō)不對(duì)。那么如果這中情況下呢？
hello
不用說(shuō)，大家都知道會(huì)使用style="color: red;"屬性定義的顏色，是red。
那么，css所遵從的具體規(guī)則是什么呢？
權(quán)重計(jì)算規(guī)則第零等：!important， 大過(guò)了其它任何設(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)先級(jí)；
如果不存在 !important，存在style，那么style便具有最高優(yōu)先級(jí)；
剩下的 “ID” 、 “類，偽類和屬性” 、 “元素類型和偽元素“ 分別對(duì)應(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/114144.html
摘要：優(yōu)先級(jí)是基于不同種類選擇器組成的匹配規(guī)則。但是，在內(nèi)部聲明的選擇器是會(huì)影響優(yōu)先級(jí)。當(dāng)兩條相互沖突的帶有規(guī)則的聲明被應(yīng)用到相同的元素上時(shí)，擁有更大優(yōu)先級(jí)的聲明將會(huì)被采用。擴(kuò)展閱讀前端面試題選擇器 一、選擇器優(yōu)先級(jí) 瀏覽器通過(guò)優(yōu)先級(jí)來(lái)判斷哪一些屬性值與一個(gè)元素最為相關(guān)，從而在該元素上應(yīng)用這些屬性值。優(yōu)先級(jí)是基于不同種類選擇器組成的匹配規(guī)則。 二、優(yōu)先級(jí)計(jì)算 優(yōu)先級(jí)就是分配給指定的CSS聲明...
摘要：優(yōu)先級(jí)是基于不同種類選擇器組成的匹配規(guī)則。但是，在內(nèi)部聲明的選擇器是會(huì)影響優(yōu)先級(jí)。當(dāng)兩條相互沖突的帶有規(guī)則的聲明被應(yīng)用到相同的元素上時(shí)，擁有更大優(yōu)先級(jí)的聲明將會(huì)被采用。擴(kuò)展閱讀前端面試題選擇器 一、選擇器優(yōu)先級(jí) 瀏覽器通過(guò)優(yōu)先級(jí)來(lái)判斷哪一些屬性值與一個(gè)元素最為相關(guān)，從而在該元素上應(yīng)用這些屬性值。優(yōu)先級(jí)是基于不同種類選擇器組成的匹配規(guī)則。 二、優(yōu)先級(jí)計(jì)算 優(yōu)先級(jí)就是分配給指定的CSS聲明...
摘要：前言接上篇前端筆試題面試題記錄上。默認(rèn)值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據(jù)自身位置進(jìn)行偏離，當(dāng)子元素設(shè)置，將依據(jù)它進(jìn)行偏離。。 前言 接上篇前端筆試題面試題記錄（上）。趁清明小長(zhǎng)假，把上篇剩下的部分也寫(xiě)一下，因?yàn)樽罱容^忙這篇已經(jīng)拖了很久了?，F(xiàn)在剛剛開(kāi)始銀四了，應(yīng)該還是有些小伙伴在找工作，時(shí)間還不算太晚，希望本篇可以幫到這些小伙伴。 個(gè)人博客了解一下：obkoro...
摘要：前言接上篇前端筆試題面試題記錄上。默認(rèn)值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據(jù)自身位置進(jìn)行偏離，當(dāng)子元素設(shè)置，將依據(jù)它進(jìn)行偏離。。 前言 接上篇前端筆試題面試題記錄（上）。趁清明小長(zhǎng)假，把上篇剩下的部分也寫(xiě)一下，因?yàn)樽罱容^忙這篇已經(jīng)拖了很久了?，F(xiàn)在剛剛開(kāi)始銀四了，應(yīng)該還是有些小伙伴在找工作，時(shí)間還不算太晚，希望本篇可以幫到這些小伙伴。 個(gè)人博客了解一下：obkoro...
摘要：總結(jié)了一些優(yōu)質(zhì)的前端面試題多數(shù)源于網(wǎng)絡(luò)，初學(xué)者閱后也要用心鉆研其中的原理，重要知識(shí)需要系統(tǒng)學(xué)習(xí)，透徹學(xué)習(xí)，形成自己的知識(shí)鏈。如果需要使用，最好是通過(guò)動(dòng)態(tài)給添加屬性值，這樣可以可以繞開(kāi)以上兩個(gè)問(wèn)題。 markyun 總結(jié)了一些優(yōu)質(zhì)的前端面試題（多數(shù)源于網(wǎng)絡(luò)），初學(xué)者閱后也要用心鉆研其中的原理，重要知識(shí)需要系統(tǒng)學(xué)習(xí)，透徹學(xué)習(xí)，形成自己的知識(shí)鏈。萬(wàn)不可投機(jī)取巧，只求面試過(guò)關(guān)是錯(cuò)誤的！ sho...
閱讀 2660·2023-04-26 00:56
閱讀 2080·2021-10-25 09:46
閱讀 1317·2019-10-29 15:13
閱讀 887·2019-08-30 15:54
閱讀 2274·2019-08-29 17:10
閱讀 2682·2019-08-29 15:43
閱讀 548·2019-08-29 15:28
閱讀 3103·2019-08-29 13:24
