介紹了基礎的選擇器，以及進階用組合子的方式選擇。今天我們要來介紹更近一步的選擇器應用，偽類與偽元素。
偽類之所以叫作偽，簡單來說它的選擇器所選的不是真正存在的類別（class屬性值），它的選擇符為：冒號，它可以用來幫元素的“狀態”套樣式，或是用順序來指定元素等，通常在基本選擇器或是組合方式的選擇器無法選到、或選擇起來不夠方便時，就會用到偽類。很多時候使用偽類，可以省下幫很多元素做class的命名。
超連結的偽類：任何有超連結性值的元素可以用這個偽類，來設定狀態的樣式，也就是會用到href屬性的元素，比如<a>。
a:link {
color: green;
}
a:visited {
color: red;
}
:link 元素尚未被訪問的狀態。
:visited 元素已被訪問的狀態。
Try it on codepen.
如果還沒點顏色就已經是訪問過的，可能是你的瀏覽器記錄到曾經訪問過該網站，就會顯示已被訪問的狀態，但過一段時間，就會自動回到未被訪問的狀態。
使用者互動虛擬類別：用來跟使用者互動的元素，可以用這個虛擬類別，來設定狀態的樣式。像是<button>、<input>、<a>。
button:hover {
color: red;
}
button:active {
color: blue;
}
input:focus {
border-color: red;
}
:hover 滑鼠指標滑到該元素上頭時的狀態。
:active 元素被觸發時的狀態，比如滑鼠按下的那一刻或用右鍵按下鎖定該元素時。
:focus 被鍵盤輸入鎖定的元素狀態。
Try it on codepen.
文檔結構偽類：這類的偽類奠基在html文檔的結構，所以如果文檔的結構改變的話，樣式也會跑掉變成自己不樂見的狀況。所以通來常說，它比較適合用在網站結構較固定的部分。
最固定的結構是根元素偽類 :root，它所對應到的就是<html>元素。
:root {
color: red;
}
html {
color: red
}
兩個選擇器所做的樣式宣告，都會顯示同一個結果—讓整個文件的字都是紅色的。差別在於它們的權重不一樣，上列所述的語法，雖然html寫在後面，可是 :root的權重比較高，所以最後樣式會套紅色的字。（權重這個概念會在之後提到）
:nth-child() 兄弟結構偽類，雖然它有child這個詞，但並不是作用在子元素，而會以該元素的所有兄弟元素為目標，並依括號內的數值來選定特定的序列。這可以省下幫一個一個元素寫入的class屬性，而改以具結構規則性的方式選取。它特別適合用在有順序特性的文檔結構，像是表格<table>或是清單<ul>、<ol>。
用奇數偶數來選擇：
html：建立一個簡單的表格（五列二欄）
<table>
<tr><td>奇數列</td><td>奇數列</td></tr>
<tr><td>偶數列</td><td>偶數列</td></tr>
<tr><td>奇數列</td><td>奇數列</td></tr>
<tr><td>偶數列</td><td>偶數列</td></tr>
<tr><td>奇數列</td><td>奇數列</td></tr>
</table>
css：選擇同一層級的<tr>元素們，並將奇數列及偶數列套不同樣式。
tr:nth-child(even) {
background-color: orange;
color: white;
}
tr:nth-child(odd) {
background-color: lightgray;
color: dark;
}
渲染結果
直接指定單一數列：
css
tr:nth-child(1) {
background-color: orange;
}
渲染結果
用算式來選擇 :nth=child(an+b)：
a與b都是可以自訂的數字，n則是數列，n會從第0列開始遞增運算，如果我們想要每三列的第一列被套用樣式的話，那就是 :nth-child(3n+1)。
css
tr:nth-child(3n+1) {
background-color: yellow;
}
渲染結果
大家可以練習每四列的第二列、每五列的倒數第二列套樣式，該用怎樣的算式。Try it on codepen.
偽元素跟偽類的差異在於，偽類是基於真實存在的元素去選取不存在的class ; 而偽類則是基於存在的元素，創出一個虛擬的元素。它的選擇符是::雙冒號。
::before 在元素前創偽元素
html
<p>我是文檔內真實存在的\<p>元素</p>
css 在<p>前面創一個偽元素，用content屬性(property)宣告它的內容。
p::before {
content: "我是偽元素";
color: red;
}
渲染結果
::after 在元素後創偽元素
css
p::after {
content: "我是偽元素";
color: red;
}
渲染結果
來到了選擇器筆記的尾聲，是否有點 鬆一口氣 感傷？選擇器是很有趣的，它的作用很強大，會越用越發現它的奧妙，講了那麼多的選擇器，它們也可以混在一起使用，當然它們各自的規則不能互相衝突，否則整個樣式聲明就會無效。多多練習就會跟它們越來越麻吉了～
像是
header>.menu a ~ a::after，它選到的是在<header>元素內的class值為menu的元素內的第一個<a>之後的每個同層級<a>後方創的偽元素。有點饒舌，但就練習看看吧！←不負責任結尾(挖鼻屎...)
好啦，結果會是這樣：
Try it on codepen.
*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。
iThome鐵人賽
看影片追技術