CSS 結構和層疊

2021-09-25 12:43:05 字數 744 閱讀 6096

選擇器的特殊性高低由選擇器本身的組成決定,特殊性高的會勝出,採用其申明的方式render.

選擇器特權重計算方式:

id:加 0,1,0,0

類,屬性:加 0,0,1,0

元素,偽元素:加 0,0,0,1

結合符和萬用字元 :0,0,0,0

如選擇器是多個組合,需要求和。求和時不需要進製,位數高的比位數低的大。(0,0,1,0 大於0,0,0,101)

example:

h1  /*0,0,0,1*/

p em/*0,0,0,2*/

.grape/*0,0,1,0*/

*.bright/*0,0,1,0*/

p.bright em.dark/*0,0,2,2*/

#id216/*0,1,0,0*/

div#sidebar *[href]/*0,1,1,1*/

內聯樣式是指在元素的style .如

內聯樣式的特殊性計算權重為:1,0,0,0.

如果在申明中存在!important,則其權重最大,按照該申明render。!important是指重要申明,其寫法是在申明結束分號前新增!important。

樣式不僅會應用到當前元素,還會應用到它的後代元素,這就是繼承。

繼承的權重很小,雖然萬用字元的權重為0,0,0,0 ,繼承的權重小於萬用字元,是最小的權重。

當特殊性相同等到的兩個規則同時應用到同乙個元素時,按照順序排序。用排在最後的進行render.

CSS 結構和層疊

特殊性 特殊性 specificity 對於每個規則,使用者 會計算選擇器的特殊性並將特殊性附加到規則中的各個宣告。如果乙個元素有兩個或多個衝突的屬性宣告,有最高特殊性的宣告就會勝出。選擇器的特殊性由選擇器本身元件確定,特殊性值表述為4個部分。特殊性排序從左向右,特殊性值為1,0,0,0大於以0開頭...

CSS學習1(結構和層疊)

繼承 inheritance 是從乙個元素向其後代元素傳遞屬性值所採用的機制。確定應當向乙個元素應用哪些值時,戶 不僅要考慮繼承,還要考慮宣告的特殊性,另外需要考慮宣告本身的 這個過程就稱為層疊 cascade 本章將討論這3種機制之間的關聯 特殊性 繼承和層疊。實際上,可能同乙個元素可以使用兩個或...

CSS 層疊和繼承

我們知道文件中的乙個元素可能同時被多個css選擇器選中,每個選擇器都有一些css規則,這就是層疊。這些規則有可能不矛盾的,自然這些規則將會同時起效,然而有些規則是相互衝突的,例如 html xmlns head title css cascade title style type text css ...