http://MobileDev.TW 1 CSS Cascading & Inheritance 鐘祥仁 Ryan [email protected] CSS Cascading & Inheritence 

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

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

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

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

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

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

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

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

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 

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 

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

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

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

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

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