本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧

歡迎進入 CSS 內建分類選取器的領域 - 偽類(pseudo-class)選取器，偽類選取器是屬於 CSS 內建的分類，意思就是你可以直接使用這種選取器來選到你想要的對象，先從我們最常使用到的超連結來看，CSS 有針對物件的幾個狀態內建狀態類的偽類以便利我們設計頁面互動與視覺。

點擊一個超連結要經過多少動作

以超連結來說，他是一個「具有功能性的」資訊，你可以想像他是一個按鈕，按了這個按鈕之後你的畫面就會切換成另外一個畫面，也許有人覺得把超連結比喻成按鈕可能有欠妥當，但我們日常生活中最接近超連結的功能的實際物品，大概就是按鈕了，所以我暫時以此舉例。那麼當我們要按下一個按鈕的時候會有幾個過程呢?

1. 移動滑鼠讓游標往按鈕前進
2. 游標【移動到按鈕上】了
3. 游標在按鈕的區域範圍中【按下滑鼠】
4. 放開滑鼠點擊狀態
5. 畫面換頁
6. 未來回到本頁時，提供【已經點擊過的提示】

從上面幾個過程來看可以發現，其實一個按鈕被點擊之後到換頁的過程可以有以下幾種變化

1. 尚未點擊的外觀
2. 滑鼠摸到按鈕時的外觀
3. 點擊當下的外觀
4. 點擊過後的外觀

不是所有人都會用滑鼠

實際上我的標題如果改成【不是每個人都能使用滑鼠】會更貼切! 如果我今天沒有使用滑鼠只使用鍵盤的話，那我要怎樣操作點擊按鈕的過程並提供視覺回饋呢? 瀏覽器針對使用鍵盤操作的過程就比較簡單了，他只有【未取得焦點】跟【取得焦點】兩個狀態，所以我們應該把剛剛的四個狀態外觀再加上這個使用鍵盤取得焦點的狀態，那就會變成以下這五種

1. 【尚未點擊】的外觀
2. 【滑鼠觸碰】的外觀
3. 【點擊當下】的外觀
4. 【取得焦點】的外觀
5. 【點擊過後】的外觀

以上五種外觀對應到 CSS 的偽類選取器的話，分別就是

1. 【尚未點擊】:link
2. 【滑鼠觸碰】:hover
3. 【點擊當下】:active
4. 【取得焦點】:focus
5. 【點擊過後】:visited

其中又有一個需要特別注意到的狀態是 :link ，這個狀態指的是超連結具備有 href 這個屬性時會被選取到，但由於之前瀏覽器支援度不佳的關係，至今多數的時候我們會忽略這個選取器，直接使用 a{....} 來設定我們的超連結未點擊前的外觀，且這個選取器是無法作用在真正的「按鈕」上的，請切記!!

接下來，讓我們回歸到正式的說法，把「按鈕」的這種比喻方式轉換回標準的「超連結」稱呼吧!

過程的順序

一個物件被點擊的順序如前一段文字所提的，他的順序可以對應到五種偽類選取器，這麼多種狀態搭配選取器之後，就產生了一些弔詭的問題了，在許多網路上面的教學文件都會說，麻煩依照以下順序設定超連結的狀態

1. a
2. a:visited
3. a:hover
4. a:active

不然你的超連結會有幾個效果會失效無作用，講直白一點就是被你弄壞掉啦! 但是為什麼會壞掉卻沒說? 這樣太過分了，死背就會的東西不是真正的懂阿(咦? 這是俗稱的地圖砲嗎)，其實如果對 CSS 有個基本的了解的話，簡單推導一下就會懂了阿

讓我們回到上一篇 僞類選取器 - 何謂僞類選取器 回想一下，讓我們節錄一下文中很多人不見得會放在心上的兩段話

偽類的原文是 pseudo-class ，如同 CSS class 一樣都屬於 class 的一種
也因為偽類 (pseudo-class) 本身就是一個 class 的類型，相對的他的優先權也就跟 class 是一樣的。

這樣懂了嗎? 因為是 class 所以優先權等同於 class，所以依照「 CSS基礎優先權規則」中的同等選取器下後者覆寫前者 規則，壞掉也很正常的阿!

ㄜ.......你說你還不懂? Amos 來玩壞一個給你看看好了，以下原始碼中，哪個效果會失效呢?

a:active{ color: red; }
a:hover{ color: green; }

答案是「滑鼠點擊 / :active」 效果會失效，因為當你點擊你的超連結時，你的滑鼠同時也是在「滑鼠觸碰超連結」的狀態，所以按照基本優先權規則，當然前面那個會壞掉啦。如果這樣還是不懂......來報名上我的暴力班吧(直接工商了啦)

佛克斯的應用

好啦! 我知道這標題很欠揍， :focus 顧名思義就是「取得焦點」的狀態，除了超連結可以有取得焦點的狀態外，一些表單也有支援取得焦點的狀態，像是常見某些網頁會在表單取得焦點時，讓背景色彩有所變化，以藉此讓使用者更容易聚焦在正在填寫的欄位，像是下方範例

HTML

<form>
	<div>
		<input type="text" name="" id="">
	</div>
	<div>
		<input type="text" name="" id="">
	</div>
	<div>
		<button>送出表單</button>
	</div>
</form>

CSS

input[type="text"]:focus{
	background-color: #ffa;
}

至於還有那些可以發揮的應用實例，就看各位金魚的創意囉。順便反問各位一個問題，看完上面這一堆的描述跟原理，那麼各位會把 :focus 放在哪個狀態前面呢? 又為何要這樣放呢? 期待各位的創意發想囉。

以上就是今天的 金魚都能懂的 CSS 選取器 - 經常用於超連結的動態僞類選取器，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見～

金魚都能懂的教學系列

• 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎 系列

鐵人雙主題挑戰中，歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學