從 <a> 連結的 Love Hate 看 CSS 的從普遍性到特定的樣式覆蓋原則

寫 CSS 樣式時，當兩個選取器都選中了同一個元素，但兩者樣式有矛盾時，哪一個樣式生效？哪一個被覆蓋掉？很多時開發者會誤會 CSS 樣式選取器是放後面的覆蓋前面的，其實不然。CSS 樣式的 C 是 Cascading，指一層層落，一層層覆蓋，但有別於瀑布，CSS 樣式是特定的覆蓋普遍的。

(相片：© Copyright Steve Fareham and licensed for reuse under this Creative Commons Licence.)

LoVe HAte

2013 年我在澳洲珀斯，出席大洋洲職業技能競賽友誼賽，選手寫的 <a>連結中的 hover 及 active 沒有按需求生效。

然後澳洲的網站專家和我說，你不知道 Love Hate 嗎？真不知道呢。

<a> 連結的狀態，按以下順序，從普遍性到特定。

• a
• a:link
• a:visited
• a:hover
• a:active

而他們為了好記，就使用 LoVe HAte 來記著 :link, :visited, :hover, :active 的順序。

:link

<a> 作為 HTML 元素，是最普遍的，而 <a> 當年有分是連結還是不是連結。

有連結的 <a> 是有 href 屬性。現在基本上都有，即所有 <a> 都是連結 (:link)。

以前 <a> 除了作為連結，也可以作為頁內定位（anchor），例如網址連結 #here 會跳去 <a name="here"> 的位置。而隨著現時都使用任何元素的 id 及頁內定位name 屬性亦已進入 deprecated 放棄使用狀態，所以現時基本所有 <a> 都是 :link。

:visited

然後，連結中又會分為已連結的 :visited 及未按連結的。所以 :visited 會是所有連結的子集。

:hover

而 Hover，一個鼠標下，:hover 只會是一個連結，所以 Hover 是更特定的情況，樣式會覆蓋 :visited 及 :link 的。

:active

而 :active 則是按下後的樣式，比鼠標移入更處於特定情況。因為一個連結可以移入但未按下，但按下時也同時處於移入狀態。所以 :active 會覆蓋 :hover, :visited 及 :link 的樣式。

總結

這個 LoVe HAte 順序就是 CSS 中的連結的 CSS 樣式順序，從中可以看出 CSS 的 Cascading 層疊是如何從普遍性到特定作樣式覆蓋。

— 麥誠 Makzan，2022-01-18。

我是麥誠軒（Makzan)，除了正職外，平常我要麼辦本地賽與辦世界賽，要麼任教編程與網站開發的在職培訓。現正轉型將面授培訓內容寫成電子書、網上教材等，至今撰寫了 7 本書， 2 個視頻教學課程。

如果我的文章有價值，請左下角 👍🏻按讚支持，或訂閱贊助我持續創作及分享。