CSS3 擬類型(Pseudo-classes) | Selector
擬類型的概念是為了允許我們選擇位於 HTML 文件結構之外或者是不能使用其它簡單選取器來表達的資訊。擬類型選取器它是使用冒號 ":" 然後再接續擬類型的名稱來表示。
:擬類型的名稱
動態擬類型(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> <!-- 有框線 -->
