::擬元素的名稱

::first-line

適用於區塊層級(Block-Level)元素的第一列。

p::first-letter {				/* 例如我們做這樣的設定時 */
	color: blue;
}

::first-letter

適用於區塊層級(Block-Level)元素的第一個字。

p::first-letter {				/* 例如我們做這樣的設定時 */
	float: left;
	color: blue;
	font-size: 50px;
	font-weight: bold;
}

::selection

表示經由瀏覽者強調之後的部分文件內容。例如我們在網頁上選取一些文字時(反白)，通常其表現出來的就是藍底白字。

p::selection {					/* 例如我們做這樣的設定時 */
	background-color: yellow;
	color: red;
}

::after

用來和 content 樣式一起使用，設定在目標內容產生之後。

p::after {					/* 例如我們做這樣的設定時 */
	content: "我在後面!";
	color: red;
}

::before

用來和 content 樣式一起使用，設定在目標內容產生之前。

p::before {					/* 例如我們做這樣的設定時 */
	content: "我在前面!";
	color: red;
}

:擬類型的名稱

動態擬類型(Dynamic pseudo-classes)

鏈結(Link)的擬類型 – :link 與 :visited

:link 適用於顯示尚未點選過的超鏈結外觀。

:visited 適用於顯示已經點選過或瀏覽過內容的超鏈結外觀。

a:link {color: #000099;}			/* 設定尚未點選時 */
a:visited {color: #000099;}			/* 設定已點選過時 */

瀏覽者行為的擬類型 – :hover, :active, 與 :focus

:hover 適用於可盤旋(hover)之元素，或者說是滑鼠游標在目標元素上並且未有動作時。

:active 適用於處於啟動中(active)之元素，或者說是滑鼠游標在目標元素上有動作時。

a:link {color: #000099;}			/* 設定尚未點選時 */
a:visited {color: #000099;}			/* 設定已點選過時 */
a:hover {color: #990000;}			/* 設定在目標上時 */
a:active {color: #009900;}			/* 設定正在點選時 */

/* :link, :visited, :hover, :active 這四個同時在設定的時後, 要注意其順序. */

:focus 適用於處於輸入焦點中(focus)之元素，例如鍵盤輸入、滑鼠事件或表單輸入時。

<input type="text" name="user" value="ID" />

input:focus {background-color: red;}		/* 設定點選輸入框時 */

目標擬類型(The target pseudo-class)

:target

適用於 URIs 結尾有使用到 A 錨識別符號(#)，或稱分段識別器(Fragment Identifier)。

h1:target {color: red;}				/* 例如我們做這樣的設定時 */

<!-- 點擊鏈結並跳到目標點時, h1 的顏色會變成紅色 -->
<a href="#myLoc">Go to title.</a>		<!-- 設定一個 A 錨 -->
<h1 id="myLoc">標題</h1>				<!-- 我們所設定的目標地點 -->

語系擬類型(The language pseudo-class)

:lang()

適用於依據瀏覽者的語系來設定。

p:lang(en-us) {color: #0000ff;}		/* 瀏覽者使用 en-us 語系時 */
p:lang(zh-tw) {color: #00ff00;}		/* 瀏覽者使用 zh-tw 語系時 */

p.myLang:lang(zh-tw) {color: blue;}	/* 例子(續) */
<p class="myLang">測試</p>		<!-- 我使用 zh-tw 所以是藍色 -->

p.myLang:lang(en-us) {color: blue;}	/* 例子(再續) */
<p class="myLang">測試</p>		<!-- 我沒用 en-us 所以它繼承親代顏色 -->

UI 元素標籤的狀態擬類型(The UI element states pseudo-classes)

:enabled, :disabled

:enabled 擬類型適用於代表使用者介面上的元素是在啟用中的狀態，這些元素有著相對映的停用狀態。反過來說，:disabled 擬類型適用於代表使用者介面上的元素是在停用中的狀態，這些元素有著相對映的啟用狀態。

什麼是構成啟用狀態、停用狀態或使用者介面元素，這些都完全依賴於文件語言(如 HTML)。然而，在典型的文件上，大部分的元素既不是 :enabled 也不是 :disabled 狀態。(這類的擬類型主要還是針對於 HTML 的表單類標籤。)

button:enabled {border: 5px solid blue;}
button:disabled  {border: 5px solid red;}

<!-- 5px 藍色框線 -->
<button type="button" >Demo</button>

<!-- 5px 紅色框線 -->
<button type="button" disabled="disabled">Demo</button>

:checked

適用於匹配元素已核取的狀態(如 radio 或 checkbox)。

input:checked + span {color: blue;}		/* 例如我們做這樣的設定時 */

<input type="checkbox" checked="checked" />	<!-- 該項目預設為已核取 -->
<span>項目一</span>				<!-- 藍色字體 -->
<input type="checkbox" />
<span>項目二</span>				<!-- 繼承親代顏色 -->

<!-- 當您核取項目二時, 它就會從繼承親代的顏色(例如黑色)動態的變為藍色字體. -->
<!-- 當您取消掉任何一個已核取的狀態時, 其字體顏色就會動態的變為繼承親代顏色. -->

:indeterminate

例如 radio 與 checkbox 元素可以經由使用者來做切換的動作，但有時它會在不確定的狀態下，既不是已核取狀態也不是未核取狀態。會有這樣的結果，可能是由於元素的屬性或者是 DOM 操作上的因素。

所以，這個規範的未來版本可能會引入一個名為 :indeterminate 的擬類型(Pseudo-classes)來套用於不確定狀態的元素上。

結構擬類型(Structural pseudo-classes)

選取器引入了結構擬類型(Structural Pseudo-Classes)的概念，來允許在 HTML 結構樹中無法以簡單的選取器或組合來表達之額外資訊的選擇。

當在計算其父元素的所有子元素中之元素位置時，獨立的內容文字與其它非元素(Non-Element)的節點是不被計算的，並且其索引編號從 1 開始。

結構擬類型中，有四個功能強大與特別的擬類型，它可以讓設計人員依據元素的位置，然後一次選擇多個元素來做設定。對於這四個擬類型，在一開始也許會感到有些混亂；但是，一旦有了些許竅門，您會覺得並非那麼困難。這四個為 :nth-child()、:nth-last-child()、:nth-of-type() 與 :nth-last-of-type()。

:nth-child()

:nth-child(an+b)

• b – 代表我們在所有的相關序號位置中，要匹配的第一個元素位置(起始位置)。
• a – 代表我們在所有的相關序號位置中，匹配之後的想要再次匹配之元素的間隔序號數目。
• 由前頭往後算，所以有正號就往下，有負號就往上。

例如 2n+1 表示：我們要從群組中匹配第 1 個元素，之後再匹配間隔 2 個序號的元素( 1 + 2 = 3, 3 + 2 = 5, 5 + 2 = 7,…)。所以，該群組若有很多元素的話，其匹配的元素將會是第 1, 3, 5, 7, 9, 11…個。

div#demo p:nth-child(2n+1) {		/* 例如我們做這樣的設定 */
  background-color: pink;
}

<div id="demo">
	<p>第一段</p>			<!-- 粉紅色背景(起始位置, 往下) -->
	<p>第二段</p>			<!-- 繼承親代背景顏色 -->
	<p>第三段</p>			<!-- 粉紅色背景 -->
	<p>第四段</p>			<!-- 繼承親代背景顏色 -->
	<p>第五段</p>			<!-- 粉紅色背景 -->
</div>

2n+1 可以使用關鍵字 odd (奇數)取代；2n+0 可以使用關鍵字 even (偶數)取代。

an+b 表達式除了可以使用正號(加號)外，也可以使用負號(減號)。

/* 一些例子 */
:nth-child(10n-1) 等於 :nth-child(10n+9)
:nth-child(0n+5) 等於 :nth-child(5)
:nth-child(1n+0) 等於 :nth-child(n+0) 等於 nth-child(n)

:nth-child( 3n + 1 )
:nth-child( +3n - 2 )
:nth-child( -n+ 6)
:nth-child( +6 )

:nth-last-child()

:nth-last-child(an+b)

• b – 代表我們在所有的相關序號位置中，要匹配的最後一個元素位置(起始位置)。
• a – 代表我們在所有的相關序號位置中，匹配之後的想要再次匹配之元素的間隔序號數目。
• 由後頭往前算，所以有正號就往上，有負號就往下。

div#demo p:nth-last-child(-n+2) {	/* 例如我們做這樣的設定 */
  background-color: pink;
}

<div id="demo">
	<p>第一段</p>			<!-- 繼承親代背景顏色 -->
	<p>第二段</p>			<!-- 繼承親代背景顏色 -->
	<p>第三段</p>			<!-- 繼承親代背景顏色 -->
	<p>第四段</p>			<!-- 粉紅色背景(起始位置, 往下) -->
	<p>第五段</p>			<!-- 粉紅色背景 -->
</div>

div#demo p:nth-last-child(n+2) {	/* 例如我們做這樣的設定 */
  background-color: pink;
}

<div id="demo">
	<p>第一段</p>			<!-- 粉紅色背景 -->
	<p>第二段</p>			<!-- 粉紅色背景 -->
	<p>第三段</p>			<!-- 粉紅色背景 -->
	<p>第四段</p>			<!-- 粉紅色背景(起始位置, 往上) -->
	<p>第五段</p>			<!-- 繼承親代背景顏色 -->
</div>

:nth-of-type()

:nth-of-type(an+b)

• b – 代表我們在所有的相關序號位置中，要匹配相同類型的第一個元素位置(起始位置)。
• a – 代表我們在所有的相關序號位置中，匹配之後的想要再次匹配之元素的間隔序號數目。
• 由前頭往後算，所以有正號就往下，有負號就往上。

div#demo p:nth-of-type(2n+1) {		/* 例如我們做這樣的設定 */
  background-color: pink;
}

<div id="demo">
	<p>第一段</p>			<!-- 粉紅色背景(起始位置, 往下) -->
	<div>第二段</div>		<!-- 非 p 類型(忽略) -->
	<div>第三段</div>		<!-- 非 p 類型(忽略) -->
	<p>第四段</p>			<!-- 繼承親代背景顏色 -->
	<p>第五段</p>			<!-- 粉紅色背景 -->
</div>

:nth-last-of-type()

:nth-last-of-type(an+b)

• b – 代表我們在所有的相關序號位置中，要匹配相同類型的最後一個元素位置(起始位置)。
• a – 代表我們在所有的相關序號位置中，匹配之後的想要再次匹配之元素的間隔序號數目。
• 由後頭往前算，所以有正號就往上，有負號就往下。

div#demo p:nth-last-of-type(n+2) {	/* 例如我們做這樣的設定 */
  background-color: pink;
}

<div id="demo">
	<p>第一段</p>			<!-- 粉紅色背景 -->
	<div>第二段</div>		<!-- 非 p 類型(忽略) -->
	<div>第三段</div>		<!-- 非 p 類型(忽略) -->
	<p>第四段</p>			<!-- 粉紅色背景(起始位置, 往上) -->
	<p>第五段</p>			<!-- 繼承親代背景顏色 -->
</div>

:root

適用於用來代表文件中的根元素，例如在 HTML 文件中，是表示 <html> 元素標籤。

:first-child

適用於用來代表任何處於其它父元素的第一個子代。

div#demo p:first-child {color: red;}	/* 例如我們做這樣的設定 */

<div id="demo">
	<p>第一段</p>			<!-- 第一個子代(紅色字體) -->
	<p>第二段</p>			<!-- 繼承親代顏色 -->
	<p>第三段</p>			<!-- 繼承親代顏色 -->
</div>

:last-child

適用於用來代表任何處於其它父元素的最後一個子代。

div#demo p:last-child {color: red;}	/* 例如我們做這樣的設定 */

<div id="demo">
	<p>第一段</p>			<!-- 繼承親代顏色 -->
	<p>第二段</p>			<!-- 繼承親代顏色 -->
	<p>第三段</p>			<!-- 最後一個子代(紅色字體) -->
</div>

:first-of-type

適用於匹配我們所指定元素類型的第一個子代元素。

div#demo p:first-of-type {color: red;}	/* 指定 p 類型 */

<div id="demo">
	<div>第一段</div>		<!-- 繼承親代顏色 -->
	<p>第二段</p>			<!-- 第一個子代(紅色字體) -->
	<p>第三段</p>			<!-- 繼承親代顏色 -->
</div>

:last-of-type

適用於匹配我們所指定元素類型的最後一個子代元素。

div#demo p:last-of-type {color: red;}	/* 指定 p 類型 */

<div id="demo">
	<div>第一段</div>		<!-- 繼承親代顏色 -->
	<p>第二段</p>			<!-- 繼承親代顏色) -->
	<p>第三段</p>			<!-- 最後一個子代(紅色字體) -->
	<div>第四段</div>		<!-- 繼承親代顏色 -->
</div>

:only-child

適用於用來代表任何處於其它父元素的子代並且只有該子代元素。

p:only-child {color: red;}		/* 例如我們做這樣的設定 */

<p>第一段</p>				<!-- 繼承親代顏色 -->
<p>第二段</p>				<!-- 繼承親代顏色 -->
<div>
	<p>第三段</p>			<!-- 紅色 -->
</div>
<!-- 續 -->
<p>第一段</p>				<!-- 繼承親代顏色 -->
<p>第二段</p>				<!-- 繼承親代顏色 -->
<div>
	<p>第三段</p>			<!-- 繼承親代顏色 -->
	<p>第四段</p>			<!-- 繼承親代顏色 -->
</div>

:only-of-type

適用於用來代表任何處於其它父元素的子代並且只有該唯一子代元素匹配我們指定的類型。

b:only-of-type {color: red;}		/* 指定 b 類型 */

<p><b>第一段</b></p>			<!-- 紅色 -->
<p><b>第二段</b><b>第二個 b 元素</b></p>	<!-- 繼承親代顏色 -->
<p><b>第三段</b></p>			<!-- 紅色 -->
<p><i>第四段</i></p>			<!-- 繼承親代顏色 -->

:empty

適用於用來代表一個沒有任何內容與子代的空元素標籤。元素節點和非空(non-empty)文字節點都是被認做為是子代元素；空文字節點、註解與指令的處理都不屬於子代元素。

<p></p>					<!-- 有效的空元素標籤 -->
<p>hello</p>				<!-- 無效的空元素標籤 -->

:contains()

這個擬類型目前沒有資料。

否定擬類型(The negation pseudo-class)

:not()

:not(simple selector)

適用於用來指定不匹配的選取器。

div:not(.Item) {border: 1px solid red;}	/* 排除 div class="Item" */

<div class="Item">第一段</div>		<!-- 無框線 -->
<div>第二段</div>			<!-- 有框線 -->

Selector ——顧名思義就是選擇我們想套用樣式的標的物。

通常選取器的選擇，我們都是使用 HTML 已命名的標籤名稱來作為我們的選取器，例如 div 或 p 等等的標籤名。一旦完整設定之後，整個樣式的效果就會表現在我們所選擇的 HTML 標籤或其內容，然後在瀏覽器上呈現。

例如：我們在 HTML 文件中如果想讓 <div> 標籤在瀏覽器上呈現出有框線的話，這時我們就要找一個「目標」來套用相關的樣式；這時，我們就可以選擇 <div> 標籤中的 div 這三個字來作為我們的目標，像這樣經過我們選擇之後的目標文字就是——選取器(Selector)。

div {border: 1px solid red;}		/* 選擇 div 標籤作為選取器 */
p {color: blue;}			/* 選擇 p 標籤作為選取器 */

不過這樣的表現方式常會有問題產生，例如上述之中所表示的是：所有的 div 標籤均有 1px 寬度的紅色框線，所有的 p 標籤，其文字顏色(前景顏色)為藍色；除非您真的打算這麼做。

想要套用樣式，最好的方式就是為標籤加上識別選取器(id)或類型選取器(class)；如此一來的話，想要套用樣式的地方依舊可以套用，而不想套用的地方依舊可以保有原有的格式。若是其它的標籤不會用到的話，也可以直接在標籤之中插入 style 屬性來設置樣式。

div#myDemo {border: 1px solid red;}	/* 加入 #myDemo 識別選取器 */
p.myDemo {color: blue;}			/* 加入 .myDemo 類型選取器 */
<p style="color: red;">...</p>		/* 插入 style 屬性到標籤中 */

語法的基本規則結構

在每個規則結構之中都包含有兩個部份，第一個部分是選取器，這是用來決定那些已命名的 HTML 元素標籤名稱或者由我們自定的名稱會受到樣式與其值的影響。

第二個部分則是樣式宣告，由一組或多組屬性(性質)樣式：樣式值來指定選取器的動作，也就是 { 與 } 所括起來的部份。倘若選擇器之中，有一個以上的屬性樣式，記得在每組之間用分號「;」隔開彼此。像這樣每組之間使用分號來「串接」的方式也就是其串接式樣式表名稱的由來。※如果只有一組樣式的話，其實是不用分號的，不過為了好習慣還是建議寫上。

類型選取器(Type selector)

類型選取器，我們從另個角度來說，也可以把它稱之為標籤選取器。在 HTML 文件中，有許多的元素標籤，而這些已命名的標籤名稱可供我們來使用。

簡單講，類型選取器就是選取文件中的標籤類型。

h1 {color: red;}			/* 選取 h1 類型的標籤 */
div {border: 1px solid blue;}		/* 選取 div 類型的標籤 */
p {letter-spacing: 2px;}		/* 選取 p 類型的標籤 */

全域選取器(Universal selector)

全域，指的就是一份 HTML 文件中，任何的元素標籤類型(Element Type)。使用 * 號來表示全域選取器。

*.myDemo {color: red;}			/* 任何含有 class="myDemo" 的標籤 */
*#myDemo {color: red;}			/* 任何含有 id="myDemo" 的標籤 */

在上述的例子中，"*.myDemo 同等於 .myDemo" 並且 "*#myDemo 同等於 #myDemo"。雖是如此，但為了不造成選取器間的混亂與增進樣式表的可讀性，推薦您不要忽略 * 號。

div :first-child			/* 意義不同於 div:first-child */
div:first-child				/* 意義不同於 div :first-child */

div *:first-child			/* 可讀性提高-等同 div :first-child */

如果不懂上方例子中的說明，那我們再來兩個例子做比較應該會清楚些。

div {color: red;}
div:first-child {color: blue;}		/* 第一個 div */

<div>
　　<p>第一列</p>				<!-- 藍色文字(文字顏色繼承) -->
　　<p>第二列</p>				<!-- 藍色文字(文字顏色繼承) -->
　　<div>
　　	<p>第三列</p>			<!-- 紅色文字 -->
　　	<p>第四列</p>			<!-- 紅色文字 -->
　　</div>
</div>

div {color: red;}
div :first-child {color: blue;}		/* div 標籤下所有的第一個子代(任何標籤) */

<div>
　　<p>第一列</p>				<!-- 藍色文字 -->
　　<p>第二列</p>				<!-- 紅色文字 -->
　　<div>
　　	<p>第三列</p>			<!-- 藍色文字 -->
　　	<p>第四列</p>			<!-- 紅色文字 -->
　　</div>
</div>

因此，一個不小心筆誤的話，就會造成不同的效果；所以加上個 * 號的話，是會更清楚些。

群組選取器(Groups of selectors)

當有很多選取器的樣式是相同時，就可以使用這個方式來簡化。※記得在選取器與選取器之間，使用逗號 "," 來區隔。

/* 例如原本的樣式如下 */
div#demoA {border: 1px solid black;}
div#demoB {border: 1px solid black;}
div#demoC {border: 1px solid black;}

/* 這時就可簡化成如下 */
div#demoA, div#demoB, div#demoC {border: 1px solid black;}

在上述的例子中，因為每個單一的選取器是合法且有效的，所以整個群組選取器自然而然就是有效的語法結構；如果其一有非法且無效的選取器，那麼整個群組就會無效。

識別選取器(id)與類型選取器(class)

id 與 class 是我們在 HTML 標籤中，用來呼叫使用我們自定名稱所設定的樣式。例如：

<div id="myDemo">您的內容</div>		/* 在 div 標籤中加入 id 屬性名稱 */
<div class="myDemo">您的內容</div>	/* 在 div 標籤中加入 class 屬性名稱 */

在上述例子裡，我們在 <div> 中置了一個 id="myDemo"，其所代表的意義為——在該標籤中呼叫了一個我們自定識別選取器名稱為 myDemo 的選取器，所以在這個 <div>…</div> 標籤對中的內容就會依照這個選取器所設定的樣式屬性與屬性值來呈現。

識別選取器(id)

#id名稱 {樣式屬性: 樣式值;}

#myDemo {border: 1px solid blue;}	/* 不限定何種標籤 */

只要在標籤中加上 id="您自定的名稱"，也就是識別選取器名稱，這樣便可呼叫使用。若是前頭不加 HTML 的標籤名，則表示它可以套用在任何的標籤上(不限定)。※不要忘記名稱前頭的 # 字號。

標籤名稱#id名稱 {樣式屬性: 樣式值;}

div#myDemo {border: 1px solid blue;}	/* 限定於 div 標籤 */

有些樣式並非每種標籤都適用或者您只想限定在某標籤上來使用樣式，這時上述的格式就是用來限定標籤可以使用的識別選取器。例如：div#myDemo，則是表示 #myDemo 這個識別選取器只能用在 div 標籤中。

※注意：若未加上限定的標籤則表示所有的標籤皆可使用，不過這有賴於當中的樣式屬性是否適用於該標籤。

類型選取器(class)

.class名稱 {樣式屬性: 樣式值;}

.myDemo {border: 1px solid blue;}	/* 不限定何種標籤 */

只要在標籤中加上 class="您自訂的名稱"，也就是類型選取器名稱，這樣便可呼叫使用。若是前頭不加標記語言的標籤名，則表示它可以套用在任何的標籤上(不限定)。※不要忘記名稱前頭的 . 句點。

標籤名稱.class名稱 {樣式屬性: 樣式值;}

div.myDemo {border: 1px solid blue;}	/* 限定於 div 標籤 */

有些樣式並非每種標籤都適用或者您只想限定在某標籤上來使用樣式，這時上述的格式就是用來限定標籤可以使用的識別選取器。例如：div.myDemo，則是表示 .myDemo 這個類型選取器只能用在 div 標籤中。

※注意：若未加上限定的標籤則表示所有的標籤皆可使用，不過這有賴於當中的樣式屬性是否適用於該標籤。

class 與 id 的不同處

同樣一個 class 適合於好幾個不同標籤來使用，不過 id 卻只能適用於單一標籤，在可擴展超文件標記語言標準中更是嚴格。其實使用這兩個定義也不用去想那麼多，在「標準網頁」中只要記住一個大原則就可以了，那就是在「同一份」網頁中，其相同 id 的名稱只能出現一次，只要記住這點的話，那就差不多不會出錯了。

屬性選取器(Attribute selector)

元素標籤的屬性(attribute)也可以用來作為選取器。當您想使用屬性選取器時，必須考慮到目標元素標籤(Element)是否有相匹配的屬性來作為您想要的屬性選取器。

存在的屬性與其值的選取器

Element[att]

選取具有 att 屬性的元素標籤，並且無論其屬性值為何。

<h1 class="Demo">標題</h1>	<!-- h1 標籤有一個 class 屬性其值為 Demo -->

h1[class] {color: red;}		/* 將具有 class 屬性的 h1 標籤設定成紅色字體 */
h1[class][title]		/* 設定同時有 class 與 title 屬性的 h1 標籤 */

Element[att=val]

選取具有 att 屬性並且其值為 val 的元素標籤。

<h1 class="Demo" title="Post-Title">標題</h1>

/* 當 h1 標籤的 class 屬性值為 Demo 時所設定的條件才成立 */

h1[class="Demo"] {color: red;}

/* 當 h1 標籤的 class 屬性值為 Demo 並且 title 屬性值為 Post-Title 時所設定的條件才成立 */

h1[class="Demo"][title="Post-Title"] {color: red;}

Element[att~=val]

選取具有 att 屬性並且 val 為其值(使用空格分開的複數值)之一的元素標籤。

<h1 class="Demo1 Demo2">標題</h1>

/* 當 h1 標籤的 class 屬性值其一為 Demo2 時所設定的條件才成立 */

h1[class~="Demo2"] {color: red;}

Element[att|=val]

選取具有 att 屬性並且其值是以 val 或 val 之後接有連字號 – 作為開始的元素標籤。

h1[class|="Demo"] {color: red;}		/* 例如我們做這樣的設定 */

<h1 class="Demo">標題</h1>		/* 有作用 */
<h1 class="Demo-1">標題</h1>		/* 有作用 */
<h1 class="Demo-2">標題</h1>		/* 有作用 */
<h1 class="DemoABCD">標題</h1>		/* 無作用 */
<h1 class="Red-FT">標題</h1>		/* 無作用 */

子字串匹配的屬性選取器

[att^=val]

選取具有 att 屬性並且其值是以 val 作為開頭字首(前綴，Prefix)的元素標籤。如果 val 為空字串的話，該選取器將不代表任何東西。

p[title^="demo"] {color: red;}		/* 例如我們做這樣的設定 */

<p title="demo">測試</p>			/* 有作用 */
<p title="demoabcde">測試</p>		/* 有作用 */
<p title="abcdedemo">測試</p>		/* 無作用 */
<p title="">測試</p>			/* 無作用 */

[att$=val]

選取具有 att 屬性並且其值是以 val 作為結尾字首(後綴，suffix)的元素標籤。如果 val 為空字串的話，該選取器將不代表任何東西。

p[title$="demo"] {color: red;}		/* 例如我們做這樣的設定 */

<p title="demo">測試</p>			/* 有作用 */
<p title="demoabcde">測試</p>		/* 無作用 */
<p title="abcdedemo">測試</p>		/* 有作用 */
<p title="">測試</p>			/* 無作用 */

[att*=val]

選取具有 att 屬性並且其值包含有子字串 val 的元素標籤。如果 val 為空字串的話，該選取器將不代表任何東西。

p[title*="a"] {color: red;}		/* 例如我們做這樣的設定 */

<p title="apple">測試</p>		/* 有作用 */
<p title="paper">測試</p>		/* 有作用 */
<p title="thank">測試</p>		/* 有作用 */
<p title="think">測試</p>		/* 無作用 */
<p title="">測試</p>			/* 無作用 */

後代選取器(Descendant selector)

Selector1 Selector2 Selector3 ...

用來選擇「後代」關係的選取器。

div p b {color: red;}			/* 例如我們做這樣的設定 */
/* 只有當 b 選取器的父元素為 p 並且其親代元素為 div 時，b 選取器才有作用 */

<div>
	<p>測試</p>			<!-- 繼承親代顏色 -->
	<p><b>測試</b></p>		<!-- 我們設定的紅色 -->
</div>

子代選取器(Child selector)

Selector > Selector

用來選擇「子代」關係的選取器。

例如在下方的例子中，第一層的 div#Demo 為父元素，所以只有它第一代的 p 元素會受影響變為紅色。也就是說選取任何為 div#Demo 的子元素( p 標籤)。

div#Demo > p {color: red;}		/* 設定 div#Demo 之子元素的前景顏色 */
p {color: blue;}

<div id="Demo">
	<p>第一代</p>			<!-- 紅色 -->
	<p>第一代</p>			<!-- 紅色 -->
	<div>
		<p>第二代</p></div>	<!-- 藍色 -->
	<div>
		<p>第二代</p></div>	<!-- 藍色 -->
	<p>第一代</p>			<!-- 紅色 -->
</div>

兄弟選取器(Sibling selector)

Selector + Selector

用來選擇「兄弟」關係的選取器。

h1 + p {color: red;}			/* 例如我們做這樣的設定 */
/* 當緊接在 h1 之後並且與 h1 同屬於一個親代(div)的 p 元素 */

<div>
	<h1>測試</h1>			<!-- 繼承親代顏色 -->
	<p>測試</p>			<!-- 我們設定的紅色 -->
	<p>測試</p>			<!-- 繼承親代顏色 -->
</div>

一般兄弟元素組合(General sibling combinator)

Selector ~ Selector

這是用來選取指定的「兄弟元素」，選取器與選取器之間使用~(tilde) 波浪符號連接。

h1 ~ p {border: 1px solid blue;}	/* 指定 h1 的兄弟 p */

<h1>第一段</h1>				<!-- 無作用 -->
<div>第二段</div>			<!-- 無作用 -->
<p>第三段</p>				<!-- 指定的 p 兄弟 -->
<h3>第四段</h3>				<!-- 無作用 -->
<p>第五段</p>				<!-- 指定的 p 兄弟 -->

串接式樣式表(CSS)本身並無階層實體，它必須依附於超文件標記語言(HTML)的元素標籤(Element)來產生所謂的「階層」；我們換個角度來說，CSS 的「階層」是由我們在 HTML 文件中，依據我們自己所需的 HTML 元素標籤而自動被建立的。

階層對於串接式樣式表而言是基本與重要的一個概念，因為許多的選取器(Selector)是靠這種關係來選取的。而像這樣的階層結構也順帶衍生出——「親子關係」。

親子關係(Parent-Child Relationship)

我們使用上述的圖片來簡單說明一下：

• div#styleA 與 div#styleB 標籤兩者之間屬於「兄弟元素」(同胞元素)。
• 兩個 li 標籤一樣同屬於「兄弟元素」。
• 兩個 li 標籤的「父元素」為 ul 標籤。
• 兩個 li 標籤的「親代元素」有 ul 標籤、div#styleA 標籤及 body 標籤。
• div#styleA 標籤的「子元素」為 ul 標籤。
• div#styleA 標籤的「子代元素」有 ul 標籤與兩個 li 標籤。

繼承(Inheritance)

「繼承」在樣式表中，是蠻重要的一個機制，這樣的機制是將某些樣式(Style)的性質特性傳給它的「子代元素」。例如，color 這個樣式屬性，在設定好之後，它就會將這個「性質」傳承給它的子代。

「繼承」顧名思義，它不具有「可逆性」；只有它的子代能繼承，而無法繼承給親代。

當然啦，有可能廣告帳號，會因他使用一些方式而被關閉也說不定；總之，我能做的都做了，呵。

會洗的人，不外乎是我得罪過的人或利益衝突的人，並且除了睡覺外，都有時間待在網路上頭；這個範圍其實已經縮得很小了，因為一般人不會做出這麼奇怪的行為。

我想，就使用這冠冕堂皇的原因來作為我放廣告的理由吧(笑)。

最後，就由他吧，因為我不想浪費生命在這事上。 :)