偽類選取器與偽元素傻傻搞不清楚

從語法結構上面來看，偽類選取器是由一個:冒號作為開頭，接著緊接著偽類選取器的名稱，例如 :hover 或是 :first-child 或 :nth-child，偽類的原文是 pseudo-class ，如同 CSS class 一樣都屬於 class 的一種。

如果說 class 是自訂的分類的話，那麼 pseudo-class 就是 CSS 本身就提供的class，所以我們也能直接想成偽類(pseudo-class)就是一種 CSS 內建的分類選取器，也因為偽類 (pseudo-class) 本身就是一個 class，優先權也就跟 class 是一樣的。

有另外一個跟偽類選取器的宣告方式很相似的東西，他是採用兩個::冒號，只要看到兩個冒號的，別懷疑! 他就是看起來很像實際上卻毫無關係的偽元素(pseudo-element)，兩個是不一樣的東西喔!

今天會介紹一些狀態類的偽類選取器，通常會使用在超連結或是按鈕

狀態偽類選取器

• :link 尚未點擊的外觀
• :hover 滑鼠觸碰的外觀
• :active 點擊當下的外觀
• :focus 取得焦點的外觀
• :visited 點擊過後的外觀

其中又有一個需要特別注意到的狀態是 :link ，這個狀態指的是超連結具備有 href 這個屬性時會被選取到，但由於之前瀏覽器支援度不佳的關係，至今多數的時候我們會忽略這個選取器。

直接設定 a元素 來設定我們的超連結未點擊前的外觀，且這個選取器是無法作用在button

:hover

這個我個人覺得很常使用，如果今天想要做一些效果很方便。

比如說滑鼠滑到的時候按鈕變色或是字體變大移動位置都可以使用:hover

:active

這個偽類選取器的效果比較不明顯，如果你真的想要看到設定要在你設定的元素上按著滑鼠右鍵不放會比較明顯。

因為你點擊這個動作不到一秒，一秒不到以後馬上就失去效果

:focus

:focus 就是取得焦點的狀態，除了超連結可以有取得焦點的狀態外，一些表單也有支援取得焦點的狀態，像是常見某些網頁會在表單取得焦點時，讓背景色彩有所變化，以藉此讓使用者更容易聚焦在正在填寫的欄位。

:visited

:visited這個通常會用在超連結a上面，讓使用者知道哪些選項已經被點過。

其實不知道有沒有小夥伴發現瀏覽器會記錄你點擊過的超連結，如果你不喜歡預設外觀可以使用這個選取器去做一些修改。

這邊順帶一提這類選取器的權重是一樣的，所以今天如果要做一些效果建議先想好要使用哪個。

以下拿超連結舉個例子

<a href="#">Google</a>

如果我今天給他兩個偽類選取器

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

各為聰明的小夥伴應該都知道答案了! 他會使用的設定會是下面active的選項，點擊顏色會變成紅色的。

原因上面有講到這兩個偽類選取器的權重都是一樣，但是程式碼是一行往下一行解讀和後面會蓋掉前面的原理。

所以在設定這類的偽類選取器要注意這個部分!

那今天偽類選取器的介紹先到這邊!謝謝各位。

參考文獻

僞類選取器 - 何謂僞類選取器
常用於超連結的動態僞類選取器 - 讓你網頁互動變豐富