樣式表 ( Style Sheets ) :

一份網頁通常都會有三份樣式表圍繞著 :

1. 作者
2. User ( 如果user的樣式表在特性宣告上加入!important則會覆蓋 作者原先的
3. 瀏覽器 預設樣式

階層 ( Cascade ) :

運作方式 : ( 以<h1> color為例 )

以browser的角度來看，

Step 1 : 收集所有的 Style Sheets

Autor:

h1{
    color: #efefef;
}
h1.apple{
    color: blue;
}

h1.banana{
    font-size: 20px;
}

User:

body h1{
    color: red;
}

h1.banana{
    font-size: 10px;
}

Browser:

h1{
    color: black;
}
h1.banana{
    font-size: 30px;
}

Step 2 : 尋找符合的宣告

以下是有color的<h1>

Autor:

h1{
    color: #efefef;
}
h1.apple{
    color: blue;
}

User:

body h1{
    color: red;
}

Browser:

h1{
    color: black;
}

Step 3 : 為有相符的宣告做排序

按照 autor 、 user 、 browser的順序排序

//<注意!> 如果user在特性宣告加上 !important ，則 user > autor

1. Autor:

h1{
    color: #efefef;
}
h1.apple{
    color: blue;
}

1. User:

body h1{
    color: red;
}

3.Browser:

h1{
    color: black;
}

Step 4 : 依宣告的特性程度作排序

★ 特性程度是啥?

0 0 0

有一個三位數字

百位數為 選擇器是否有 id ? 有就加 1

十位數為 選擇器是否有任何 class 或 pseudo-class ? 有就加 1

個位數為 選擇器市府有任何 tag 名稱? 有就加 1

(注意)

       h1,h2  把他們想像兩個規則 

      h1   001   h2  001

====> 再依所得到的數字做排序

1. Autor:

h1.apple{             /* 011  */   /*這個權力最高*/
    color: blue;
}


h1{                    /* 001  */
    color: #efefef;    
}

1. User:

body h1{             /* 002  */
    color: red;
}

1. Browser:

h1{                 /*  001  */
    color: black;
}

Step5 : 有衝突的規則再依出現順序排列

HTML、CSS 當遇到有相同內容而衝突時，都會以較下面的程式碼為主

For example :

h1{
   color: red;
}

h1{
   color: blue;
}

結果會呈現 " 藍色 "

(例子當中沒有衝突的樣式，所以順序跟 Step4 一樣......)

結果出爐 :

h1.apple{
    color: blue;
}

====> <h1> 的 color 則會呈現 " 藍色 "

真的找不到我想要的樣式....

那就只能運用 繼承的方式