HTML CSS(v1) Style 的優先次序－傑克! 真是太神奇了!

快速參考

常見的 CSS(v1) selector 設定套用的次序如下:

<style type="text/css">
  div       { color: black ; ... }  /*       1st level */
  .nClass   { color: green ; ... }  /* +this 2nd level */
  #nId      { color: blue  ; ... }  /* +this 3rd level */
  ...
</style>
  ...
<div style="color: red; ... "><!--  /* +this 4th level */ -->

CSS 規範上說: stylesheet 的來源有 user agent, author 及 user 等三種. user agent 就是我們用的 browser 指的是 browser 的預設值; author 是作者的意思, 指的是網頁的作者在網頁上所使用的 stylesheet; 而 user 就是我們, 指的是我們在 browser 中的個人用的 stylesheet 設定. 而套用的次序是:

user agent
user normal
author normal
author important
user important

一來由於調整 stylesheet 的設定不容易, 二來由於各網站的網頁對於各種 HTML tag 的運用都不相同, 造成 user stylesheet 其實發揮不了什麼作用, 搞不好一設就破壞了原網頁的排版, 造成閱讀上的困難, 是故絕大多數人的 user stylesheet 都是空的. 因此上述的五項也就只剩下 1, 3, 4 三項了. 其中 auther important 指的是 author stylesheet 中設定值的後面附有 !important 的設定, 所以真正需要討論就是只有 author 部份.

網頁作者 (author) 可以運用的元素樣式 (style) 來源有以下幾種:

外部 stylesheet (external/included stylesheet): 使用 <link> tag 從外部引入, 可以引入多份. 例如:

<link tyle="text/css" rel="stylesheet" href="site.css" />
<link tyle="text/css" rel="stylesheet" href="docs.css" />

內崁 stylesheet (internal/embedded stylesheet): 使用 <style></style> 內建在 HTML 網頁檔案中, 可以在 <hea></head> 中, 也可以在 <body></body> 中, 可以出現多次. 例如:
```
<style type="text/css">
 div { padding:  5px; }
 p   { margin: 0 8px; }
 ...
</style>
```
置入式 style (inline style): 使用 style="..." 附加在任一個需要的 tag 中, 例如:
```
<p style="margin: 4px;">
```

舊式 style: 使用舊式 HTML 語法, 例如:

<table border="1" cellspacing="1" cellpadding="1">

這許多種來源, 除了第3項 (優先權最高) 及第4項 (優先權最低) 的作用範圍是被指定的特定元素之外, 第1及第2項都是在每一組設定 ({} 括住的部份) 前加一個作用範圍宣告 (selector), (參看 CSS 語法)

各種 selector 的優先權如下:

影響最終結果的是主要是作用範圍. 原則是作用範圍大的先設定, 再來是範圍小的, 最後才是個別元素的. 作用範圍由大到小, 如下表:

v1	v2/3	Selector 名稱	說明	範例
		Universal	萬用, 所有的 tag	`*`
4	d	Element	某一類型的 tag	`h1`
*	d	Pseudo-Element	虛擬元素	`::first-letter`
3	c	Class	有設定分類的 tag (`class="example"`)	`.example`
	c	Attribute	有設定屬性的 tag (`attr="value"`)	`[type="radio"]`
*	c	Pseudo-class	虛擬分類	`:hover`
2	b	ID	有設定 ID 的 tag (`id="example"`)	`#example`
1	a	Inline style	附在單個 tag 中的 `style="..."`	`style="font-weight:bold"`

Style 屬性重覆: style 屬性重覆時, 顯示的結果會是最後套用的 (作用範圍小的; 也就是後套用的優先權高). 例如:
```
<style>
p { color: red; }
.override { color: blue; }
</style>
...
<p>This is paragraph 1.</p>
<p class="override">This is paragraph 2.</p>
```
第6行的文字 (<p>) 是紅的. 但是因為 class selector 優先權高, 第7行的文字 (<p class="override">) 最終的結果是藍色的.
Selector 重覆: selector 重覆時, 依這些 style 在 stylesheet 的出現次序或載入次序套用設定. 例如:
```
<style>
h1, div, p { margin: 0; color: blue; }
...
p { margin: 0 1em; }
</style>
...
<p>This is a test sample.</p>
```
最後文字是藍色的, 但是 margin 的設定是: 0 1em (先套用前面的規則設定了 margin 和 color, 再套用後面的規則設定 margin)
tag 的 style 屬性有些會遺傳給被他括住的子 tag, 有些則不會. 繼承來的 style 屬性, 優先權是最低的.
- 會遺傳的, 如: 字型相關的 color, font-family, font-size, font-weight, ...
- 不會遺傳的, 如: 邊框相關的 border, padding, margin, ...
- 預設不會遺傳的 style 屬性可以在設定值使用 inhert 來進行繼承.
CSS2 及 CSS3 有更進一步的 selector 語法, 優先權的計算上會變得有點複雜 (雖然基本精神還在), 參看...(還沒寫完)
進 browser 的 debug 模式 (按 F12) 有更進一步的工具協助我們偵錯, 如: IE 有 "DOM 總管", chrome 有 "elements"

設定值後面有附加 !important 的 style 屬性, 就是 author import 的部份, 要 normal 的部份都套用過了之後才套用 (優先權比 author normal 高)

設定值附有 !important 的 selector 重覆時, 處理原則和前面一樣
```
div { color: gray !important; }
```

例子

<head>
<title>Test</title>
<style type="text/css">
div {
 font-family: Arial; font-size: 18pt;
 font-weight: bold;  color: black;
 margin: 10px;
 border: 1px solid blue;
}
p {
 border: 1px solid red;
 margin: 8px;
}
.nClass { margin: 0px; }
#nId1 { color: green; }
#nId2 { color: gray; }
</style>
</head>
<body>
<div>
<p>This is a Sample paragraph.</p>
<p id="nId1">This is a Sample paragraph.</p>
<p class="nClass">This is a Sample paragraph.</p>
<p class="nClass" id="nId2">This is a Sample paragraph.</p>
</div>
</body>
</html>

說明: