Makzan

我管理世界職業技能競賽之網站技術項目、舉辦本地設計與開發賽事、開課分享技術心得。一個用網頁來表達自己的作家。

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

發布於
2013 年我在澳洲珀斯,出席大洋洲職業技能競賽友誼賽,選手寫的 <a>連結中的 hover 及 active 沒有按需求生效。然後澳洲的網站專家和我說,你不知道 Love Hate 嗎?真不知道呢。

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

Cascading 瀑布,拍攝:Steve Fareham, Creative Common

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


LoVe HAte

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

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

2013 年 5 月的我,澳洲珀斯 (Perth)

<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 個視頻教學課程。

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


麥誠 Makzan


喜歡我的文章嗎?
別忘了給點支持與讚賞,讓我知道創作的路上有你陪伴。

CC BY-NC-ND 2.0 版權聲明

教學文系列

看不過癮?

一鍵登入,即可加入全球最優質中文創作社區