從 <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 個視頻教學課程。
如果我的文章有價值,請左下角 👍🏻按讚支持,或訂閱贊助我持續創作及分享。