第三章：權重與聯級（1）

第 11 屆 iThome 鐵人賽

DAY 10

Modern Web

CSS大全閱讀筆記系列第 10 篇

11th鐵人賽

Camellus

2019-09-26 23:26:55

834 瀏覽

分享至

當有兩組以上的規則，使用了不同的選擇器選擇到相同的元素，會依照權重解決，當權重相同時，則會依照聯級的規定解決衝突。
權重：
a. 選擇器的權重是由選擇器本身的組成決定，權重值分為（0，0，0，0）四個部分，會與對應的宣告連結。
b. 權重值的大小：!important>行內元素>ID>class>元素>通用選擇器（*）
- 選擇器每出現一個ID選擇器就加上（0，1，0，0）。
- 選擇器中每個類別選擇器、屬性選擇器與虛擬類別都各加（0，0，1，0）。
- 選擇器每個元素和虛擬元素都加上（0，0，0，1）。
- 行內樣式一旦出現，加上（1，0，0，0）。
- !important不加任何權重值，直接提至最優先等級，需寫在宣告結尾的分號前，就像p.warm {color: red !important; font-size: 15px;}。而當標記!important的宣告互相衝突時，依照衝突者之間的權重值解決。
- 連結子沒有任何權重貢獻。
- 通用選擇器（*）權重值為（0，0，0，0），但零權重值勝過沒有權重，需慎用。
- 繼承來的屬性不會有任何權重，連（0，0，0，0）都沒有。，因此，通用選擇器權重大於被繼承的屬性，這也是通用選擇器須慎用的原因，但若在宣告中給予ingerit（繼承）值者，擁有權重值，依照一般的權重計算方式計算，如#toolbar a:link {color: inherit;}，權重值為（0，1，1，1）。
c. 宣告與權重：處理權重時，所有的群組宣告都會單獨計算，像h1 {color: red; font-size: 20px;}會被拆解為h1 {color: red;}和h1 {font-size: 20px;}，分別處理其權重值。
繼承：
a. 繼承是指元素將某些屬性值傳遞給後裔選擇器的機制。
b. 元素永遠不會將數值傳遞給祖先，向上傳遞數值只會發生在<body>元素定義了背景樣式，而<html>沒有定義背景樣式時，作用在<body>元素的背景樣式，會向上傳遞給<html>（HTML文件的根元素）。
c. 大部分方框模型的屬性都無法繼承，如border、margin、padding、background等。