
昨天想使用 a:visited 改變右側“猜你喜歡”已訪問過的文字顏色,發現改來改去效果都一般,想到還有其他幾個CSS可以設置,與顏色相關的,結果,太久沒使用這個偽類選擇器,具體那幾個支持的CSS一下子記不得了,發現有必要自己整理記錄下。
一、由愛生恨
鏈接4偽類(后兩個偽類后來拖拽到幾乎所有HTML標簽元素)如果同時使用,其順序是這樣的: :link → :visited → :hover → :active 。
首字母連起來是LVHA,順序完全符合love-hate,也就是愛恨,所謂由愛生恨,這樣順序就記住了。
目前這個年代, :link 這個偽類用得已經不多了,但作用還是有的,我們平時用得比較多的都是直接設置 <a> 元素的顏色,例如:
a { color: blue; }
實際上,下面這種要更合適,更規范:
a:link { color: blue; }
兩者有什么區別呢?
區別在下面,下面兩個 <a> 元素,前者可以匹配 a:link 選擇器,但后者卻只能匹配 a 選擇器:
| <a href="##">文字</a><a>文字2</a> |
例如我很喜歡移除 href 屬性表示 <a> 元素按鈕的禁用態,使用 a:link 禁用和非禁用的CSS就更好控制了。
只是我們使用 a:link 選擇器的時候, a:visited 選擇器也一定要設置(因為 a:link 在最前面),不然訪問過的鏈接顏色就會跟著系統或者當前元素設置的 color 走,表現反而有些亂,因此,當下已經很少見到使用 :link 偽類選擇器的了。
而 :visited 偽類選擇器依然很有用,尤其在列表式鏈接站點,例如文章列表,章節列表,可以讓用戶知道這篇文章我已經看過了,算是比較友好的一種體驗處理。
二、:visited偽類選擇器支持CSS很有限
或許是出于安全考慮, :visited 偽類選擇器支持CSS很有限,目前僅支持下面這些CSS: color , background-color , border-color , border-bottom-color , border-left-color , border-right-color , border-top-color , column-rule-color 以及 outline-color 。
同時,類似 ::before , ::after 這些偽元素都不支持,例如,我們希望使用文字標示已經訪問過的鏈接,如下:
a:visited::after{content:'visited';} // 注意,不支持
不好意思,想法雖好,但沒有任何瀏覽器支持,請死了這條心。
|
新聞熱點
疑難解答