1. http://MobileDev.TW1
CSS
Cascading & Inheritance
Ryan@MobileDev.TW
CSS Cascading Inheritence

2. http://MobileDev.TW
Cascading
• 相同的CSS屬性被賦予多次不同的屬性值，但卻套
用在同一個元件時，最後一個屬性值才會被使用。
• 表頭樣式與行內樣式衝突
CSS Cascading Inheritence 2

3. http://MobileDev.TW
Cascading
• 相同的CSS屬性被賦予多次不同的屬性值，但卻套
用在同一個元件時，最後一個屬性值才會被使用。
• 表頭樣式前後衝突
CSS Cascading Inheritence 3

4. http://MobileDev.TW
Inheritance 繼承
• 有些CSS屬性會自動繼承給指定對象的子元件。
• 段落元件p下的粗體元件b
ㄨ
CSS Cascading Inheritence 4

5. http://MobileDev.TW
Inheritance 繼承
• 有些CSS屬性會自動繼承給指定對象的子元件。
• div -- p -- b
CSS Cascading Inheritence 5

6. http://MobileDev.TW
Inheritance 繼承
• 極少數CSS屬性繼承時會產生多重效果。
• div -- p -- b
CSS Cascading Inheritence 6

7. http://MobileDev.TW
Inheritance 繼承
• 有些CSS屬性會自動繼承給指定對象的子元件。
• 以比例方式設定會產生繼承值之後的比例
CSS Cascading Inheritence 7

8. http://MobileDev.TW
Inheritance 繼承
• 如果沒有自動繼承至子元件，可使用inherit強制繼承。
• 段落元件p下的粗體元件b
CSS Cascading Inheritence 8

9. http://MobileDev.TW
Inheritance 繼承
• 如果沒有自動繼承至子元件，可使用inherit強制繼承。
• 段落元件p下的粗體元件b
CSS Cascading Inheritence 9

10. http://MobileDev.TW
CSS規則套用的優先權 Specificity
• 直接寫在HTML元件的style屬性
• 優先權值：1000
• CSS選擇器使用ID的方式
• 優先權值：100
• CSS選擇器使用class,pseudo-class或限定屬性
• 優先權值：10
• CSS選擇器使用HTML元件、偽元件(pseudo-element)
• 優先權值：1
CSS Cascading Inheritence 10

11. http://MobileDev.TW
計算 Specificity
• #container ul#menu li.active ul li:hover {}
• #container：100
• ul：1
• #menu：100
• li：1
• .active：10
• ul：1
• li：1
• :hover：10
CSS Cascading Inheritence 11
Specificity：224

12. http://MobileDev.TW
聖旨駕到 !important
• 凌駕所有優先權與位置
CSS Cascading Inheritence 12

13. http://MobileDev.TW
一個HTML元件可以套用多個類別
• rule1 + rule2
CSS Cascading Inheritence 13

14. http://MobileDev.TW
id 與 class 可以同時存在
• id的優先權值比較高
CSS Cascading Inheritence 14

15. http://MobileDev.TW
選擇器也可以巢狀使用
• 用空格隔開
CSS Cascading Inheritence 15

16. http://MobileDev.TW
選擇器也可一次指定多個
CSS Cascading Inheritence 16