樣式規則

為 Interview Bit 的第 39 和 40 題。

接著前面，我們現在知道 Cascading 的意思，但是Cascading 的規則也是很重要的，所以我們接著介紹Cascading 規則。

Origin Types

CSS 宣告的來源主要有 3 種來源：

1. User-Agent stylesheets
2. Author stylesheets
3. User stylesheets

User-Agent stylesheets

瀏覽器預設的 CSS 樣式，也就是有些標籤一出現就有的樣式， 叫做 User-Agent stylesheet，不同的瀏覽器會有不同的預設樣式。 例如： <a> 一出現就有底線和顏色。

Author stylesheets

由 developer 寫的 CSS 樣式，可以覆寫預設的 User-Agent stylesheets。

User stylesheets

根據瀏覽器，User stylesheets 可以透過擴充功能或是直接由使用者更改樣式。

規則

Cascade 會從 Origin Types，Specificity 權重，Order 順序，3方面考量。

Origin Types

User stylesheets > Author stylesheets > User-Agent stylesheets

Specificity 權重

!important > ID選擇器 > CLASS選擇器 > 元素選擇器 > 通用選擇器 。

詳細的權重介紹可以參考CSS權重(specificity)：熟悉這6個樣式級別，讓你的樣式被採用

題外話，如果有2個 !important，一個在 inline style，一個加在選擇器上，inline style + !important > 任一選擇器 + !important 。

但是如果只有1個 !important， !important > inline style > 任一選擇器。

範例

只有一個 !important
CodePen

<div class="box" style=" background-color: blue">hello world</div>

.box {
  background-color: red !important; 
}

TODO: img

如果有 2 個 !important，一個在 inline style，一個加在選擇器上。
CodePen

<div class="box" style=" background-color: blue !important;">hello world</div>

.box {
  background-color: red !important; 
}

TODO: img

Order

當鎖定的元素或是選擇器相同時， 寫在後面的style會覆蓋前面的style。

div {
	background-color: red;
}
div {
	background-color: blue;
}

參考資料：
Selective Styling in CSS3
Introducing the CSS Cascade
CSS權重(specificity)：熟悉這6個樣式級別，讓你的樣式被採用
还不懂cascade你就out了：CSS之C（cascade )