三句話就搞懂!CSS選擇器的優先順序計算方法

2021-10-13 19:00:43 字數 853 閱讀 5910

首先,我們給選css擇器分類:

**計數方法:**a/b/c/d類中,出現一類,就給a/b/c/d計乙個 次數。a-d從高階到低階,a類的次數高的,其樣式權重高,其餘bcd類無需再比較;若a類的次數相同,則比較b類,b類的次數高的,其樣式高權重高,其餘cd類無需再比較。以此類推到d類。(此段一共3個句號,沒騙你吧)

abcd類樣式 的計數,舉例如下:

{}為style的括號,*星號選擇器 表示所有標籤

*{}    //a=0 b=0 c=0 d=0 最弱權重

a:hover{} //a=0 b=0 c=1 d=1

ul ol{} //a=0 b=0 c=0 d= 2

ul ol+li{} //a=0 b=0 c=0 d=3

h1+input[type=hidden]{} //a=0 b=0 c=1 d=3 [type=hiden]屬性選擇器

ul ol li.acticce{} //a=0 b=0 c=1 d=3

#ct .box p //a=0 b=1 c=1 d=1

div#header :after{} //a=0 b=1 c=0 d=2 :after偽元素

style="" //a=1 b=0 c=0 d=0

另外:

1 還有樣式覆蓋

如果上述中有 權重計數相同的樣式 相互牴觸,誰寫在下面(誰最後被寫下),誰管用,之前先寫的樣式都被覆蓋 不管用了。

2 上述分類是依據css選擇器本身的優先順序,大體上,從高到低 如下。其中 !important 會無視一切,包括上面的計算方法。

老闆的三句話

乙個男人在外工作20年,終於要回家了,老闆問他 你是要20年的工資還是要3句忠告?男人說我明天上路,明早給您答案好嗎?老闆說可以。當晚男人未眠 早晨,他對老闆說 我要3個忠告。於是老闆給他3句話。一 不要試圖尋找不可能的捷徑,世上沒有便宜的事,只有腳踏實地才是最好的方法 無論做何事。二 不要對明知不...

用人成敗的三句話

古人曾子有句話說得好 用師者王,用友者霸,用徒者亡。用師者王 就是領導者非常謙虛,尊奉真正賢能之人為老師,從而 王天下 成大功。例如周武王用姜太公尊之為國師,其後文王逝世,武王繼位,又用姜太公並尊為尚父。湯用伊尹,齊桓公用管仲尊之為仲父,燕昭王用郭隗,都是用師。用友者霸 就是領導者對下屬像兄弟朋友一...

原型需要掌握的三句話

1.每乙個函式 或函式物件 都有乙個prototype的屬性 指標 由該屬性指向了這個函式後面的原型物件.宣告在原型物件中的屬性和方法會共享乙個記憶體空間 2.每乙個物件都有乙個 proto 屬性 指標 由該屬性指向了這個物件後面的原型物件,原型物件也有 proto 這個屬性,它指向當前原型物件的父...