section 3 結構和層疊

css 繼承(inheritance): 從乙個元素向其後代元素傳遞屬性值所採用的機制。

確定應當向乙個元素應用哪些值時，使用者**不僅要考慮繼承，還要考慮宣告的特殊性，另外需要考慮宣告本身的**。這個過程就是層疊(cascade)。

可以使用多種不同的規則來選擇元素，每個規則都有自己的選擇器。規則的特殊性決定了使用哪個規則。

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

選擇器的特殊性由選擇器本身的元件確定。特殊性值表述為 4 個部分，如 0, 0, 0, 0

規則的特殊性會附加到規則的各個宣告中。如以下規則會被拆分成兩個宣告規則。

div

使用者**會確定哪些規則與乙個元素匹配，計算出所有相關宣告及其特殊性，確定哪些規則優先，將優先的規則應用到元素。如以下兩個宣告，會應用color: red;。

div div.warning

萬用字元和結合符對選擇器的總特殊性沒有任何影響。

body div /* 0, 0, 0, 2 */ body * div

/* 0, 0, 0, 2 */

id 選擇器和指定 id 屬性的屬性選擇器的特殊性不相同。

#name
/* 0, 1, 0, 0 */
[id="name"]
/* 0, 0, 1, 0 */

內聯樣式宣告比其它宣告的特殊性都高，代表特殊性的第乙個數值。如以下兩個宣告，會應用color: blue;。

#name

#id=
"name"
style
="color
: green;
">
這裡有乙個內聯樣式。p
>

css 特殊性變遷。

css 2.1 提出重要宣告，在宣告的結束分號之前插入 !import 來標誌。

.warning

!import 標誌必須放在宣告的最後，分號之前。如果 !import 放在其它位置，整個宣告都將無效。

所有的重要宣告會分組在一起，重要宣告的衝突性衝突會在重要宣告內部解決，而不會與非重要宣告相混。

所有非重要宣告也歸為一組，使用特殊性來解決衝突。

如果乙個重要宣告和乙個非重要宣告衝突，應用重要宣告的樣式。

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

元素不會把值向上傳遞到其祖先元素，但是 body 元素的背景樣式可以傳遞到 html 元素。

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

繼承的值沒有特殊性，甚至連 0 特殊性(如萬用字元 0, 0, 0, 0)都沒有。

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

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

按照特殊性對應用到給定元素的所有宣告排序，較高特殊性的宣告權重要大於較低特殊性的宣告。

按照出現順序對應用到給定元素的所有宣告排序，乙個宣告在樣式表或者文件中越靠後出現，它的權重就越大。如果樣式表中有匯入的樣式表，一般情況下，出現在匯入樣式表的宣告在前，主樣式表中的所有宣告靠後。

如果兩個樣式宣告應用到同乙個元素，其中乙個宣告有 !import 標誌，這個宣告就勝出。如以下 2 個宣告，樣式表宣告會勝出。

style
="color
: black;
">
這段文字是>
紅色em
>
的。p>

如果創作人員樣式宣告和使用者樣式宣告應用到同乙個元素，創作人員樣式宣告勝出。如以下 2 個宣告，第乙個勝出。

>
這段文字是>
紅色em
>
的。p>

如果創作人員樣式宣告包含 !import 標誌，使用者樣式宣告也包含 !import 標誌，使用者樣式宣告勝出。如以下 2 個宣告，第二個勝出。

>
這段文字是>
黑色em
>
的。p>

宣告權重由大到小的順序依次是

多個宣告應用到同乙個元素，如果他們的權重和**相同，則按照特殊性排序，最特殊的宣告勝出。如以下 2 個宣告，第乙個勝出。

"name"
class
="user"
>
這段文字是>
紅色em
>
的。p>

p#name p.user

多個宣告應用到同乙個元素，如果他們的權重，**和特殊性都相同，則在樣式表中最後出現的宣告勝出。如以下 2 個宣告，第二個會勝出。

class
="user warning"
>
這段文字是>
黑色em
>
的。p>

p.user p.warning

文件中包含的規則(style 內聯屬性和 style 元素樣式)比匯入的規則權重高。如以下 2 個宣告，第乙個會勝出。

>
/* 這是 style 元素的樣式 */
p.user
style
>
class
="user warning"
>
這段文字是>
紅色em
>
的。p>

/* 這是匯入的外部樣式 */ .warning

正是因為這種按順序排序，才有了鏈結樣式的順序，link-visited-hover-active(lvha)。

:link :visited :hover :active

多個宣告設定同乙個元素的同乙個屬性才會出現衝突，如果宣告設定的是不同的樣式，那麼順序就無關緊要了。

文件有可能包含非 css 的表現提示，如 font 元素。非 css 提示會被處理為特殊性 0，並出現在創作人員樣式表的最前面。

只要有創作人員樣式或者使用者樣式，這種表現就會被覆蓋。

ACM練習題C 版答案記錄 Section 3

最近複習c 拿起acm從頭練，在此做個答案記錄，大家不要盲目複製哦，要有自己的思考哦總體上，section3部分我花了不少時間呢，如果想破腦袋也想不到好辦法，可以去查閱網上的各種方法，不要侷限於自己的程式設計哦，做出來的題目，多看看別人的解答，也會有好處 1.3.1 排名問題花了些心思，複習了st...

CSS 結構和層疊

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

CSS 結構和層疊

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

section 3 結構和層疊

ACM練習題C 版答案記錄 Section 3

CSS 結構和層疊

CSS 結構和層疊

相關推薦