CSS 結構和層疊

2022-08-11 22:09:18 字數 2032 閱讀 9174

特殊性

特殊性(specificity

:對於每個規則,使用者**會計算選擇器的特殊性並將特殊性附加到規則中的各個宣告。如果乙個元素有兩個或多個衝突的屬性宣告,有最高特殊性的宣告就會勝出。

選擇器的特殊性由選擇器本身元件確定,特殊性值表述為4個部分。特殊性排序從左向右,特殊性值為1,0,0,0大於以0開頭的所有特殊性值,不論後面的數是什麼,以此類推。

對於選擇其中給定的各個id屬性值+(0,1,0,0)

對於選擇器中給定的各個類的屬性值、屬性選擇或偽類+(0,0,1,0)

對於選擇器中給定的各個元素和偽元素+(0,0,0,1)

結合符(無特殊性)和通配選擇器(0特殊性 i.e. 0, 0, 0, 0)對特殊性沒有貢獻。(0特殊性》無特殊性)

e.g.

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

*/

注意:id選擇器和指定id屬性的屬性選擇器不同。

e.g. id選擇器(#answer +0, 1, 0, 0),屬性選擇器([id=」totals」] +0, 0, 1,0)。

最高位為0是為內聯樣式宣告保留的,每個內聯宣告的特殊性都是1,0,0,0,比所有其他宣告的特殊性要高。

e.g.

重要性

重要宣告:有時某個宣告可能非常重要,超過了所有其他宣告,在這些重要宣告最後結束分號之前插入!important來標誌。如果沒有放在宣告最後(i.e.分號前面),則整個宣告都將無效。

e.g.

p.dark

如果需要將多個宣告都標誌為重要,需要為每個宣告新增自己的!important標識。

e.g.

p.dark

所有標識!important的宣告會分組在一起,其特殊性衝突會在重要宣告內部解決,不會與非重要宣告混合。如果乙個重要宣告和乙個非重要宣告衝突,勝出的總是重要宣告。

繼承

基於繼承機制,樣式不僅應用到指定元素,還會應用到它的後代元素。

大多數框模型屬性(外邊距、內邊距、背景和邊框)都不能繼承。

繼承值根本沒有特殊性,即低於0特殊性的萬用字元。所以,通配選擇器往往有一種短路繼承的效果,應避免不加區別地使用通配選擇器。

層疊

css2.1

層疊規則

1. 找出所有相關規則,這些規則都包含與乙個給定元素匹配的選擇器。

2. 按顯式權重對應用到該元素的所有宣告排序

標誌!important>未標誌!important

正常情況下創作人員樣式》讀者樣式

有!important標識的讀者樣式》所有其他樣式(包括有!important標識的創作人員樣式)

創作人員樣式或讀者樣式》使用者**預設樣式

權重排序:讀者重要宣告》創作人員重要宣告》創作人員正常宣告》讀者正常宣告》使用者**宣告

3. 按特殊性對應用到給定元素的所有宣告排序,較高特殊性》較低特殊性

4. (如果特殊性相等)按出現順序對應用到給定元素的所有宣告排序,宣告在樣式表或文件中越後出現權重越大。(一般認為匯入樣式表中宣告在前,主樣式表中宣告在後)。

因此可得出推薦採用link-visited-hover-active (lvha) 順序宣告的原因。

非css表現提示的特殊性為0,可被創作人員或讀者樣式覆蓋。

CSS 結構和層疊

選擇器的特殊性高低由選擇器本身的組成決定,特殊性高的會勝出,採用其申明的方式render.選擇器特權重計算方式 id 加 0,1,0,0 類,屬性 加 0,0,1,0 元素,偽元素 加 0,0,0,1 結合符和萬用字元 0,0,0,0 如選擇器是多個組合,需要求和。求和時不需要進製,位數高的比位數低...

CSS學習1(結構和層疊)

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

CSS 層疊和繼承

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