您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“CSS visited偽類選擇器如何使用”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
首字母連起來是LVHA,順序完全符合love-hate,也就是愛恨,所謂由愛生恨,這樣順序就記住了。
目前這個(gè)年代, :link 這個(gè)偽類用得已經(jīng)不多了,但作用還是有的,我們平時(shí)用得比較多的都是直接設(shè)置 <a> 元素的顏色,例如:
a { color: blue; }
實(shí)際上,下面這種要更合適,更規(guī)范:
a:link { color: blue; }
兩者有什么區(qū)別呢?
區(qū)別在下面,下面兩個(gè) <a> 元素,前者可以匹配 a:link 選擇器,但后者卻只能匹配 a 選擇器:
<a href="##">文字</a> <a>文字2</a>
例如我很喜歡移除 href 屬性表示 <a> 元素按鈕的禁用態(tài),使用 a:link 禁用和非禁用的CSS就更好控制了。
只是我們使用 a:link 選擇器的時(shí)候, a:visited 選擇器也一定要設(shè)置(因?yàn)?a:link 在最前面),不然訪問過的鏈接顏色就會(huì)跟著系統(tǒng)或者當(dāng)前元素設(shè)置的 color 走,表現(xiàn)反而有些亂,因此,當(dāng)下已經(jīng)很少見到使用 :link 偽類選擇器的了。
而 :visited 偽類選擇器依然很有用,尤其在列表式鏈接站點(diǎn),例如文章列表,章節(jié)列表,可以讓用戶知道這篇文章我已經(jīng)看過了,算是比較友好的一種體驗(yàn)處理。
二、: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 。
同時(shí),類似 ::before , ::after 這些偽元素都不支持,例如,我們希望使用文字標(biāo)示已經(jīng)訪問過的鏈接,如下:
a:visited::after{content:'visited';} // 注意,不支持
不好意思,想法雖好,但沒有任何瀏覽器支持,請死了這條心。
不過好在 :visited 偽類支持子選擇器,不過,所能控制的CSS屬性和 :visited 一模一樣,就那幾個(gè)和顏色相關(guān)的CSS屬性,也不支持 ::before , ::after 這些偽元素。
例如:
a:visited span{color: red;} <a href="">文字<span>visited</span></a>
如果鏈接是瀏覽器訪問過的,則 <span> 元素文字顏色就會(huì)直紅色,如下截圖示意:
于是,我們就可以下面這種方法實(shí)現(xiàn)訪問過的鏈接文字后面跟一個(gè)visited字樣。HTML如下:
<a href="">文字<small></small></a>
CSS如下:
small { position: absolute; color: white; } // 這里設(shè)置color: transparent無效 small::after { content: 'visited'; } a:visited small { color: purple; }
除了支持的CSS有限,:visited偽類選擇器還有不少其他奇怪的特性。
三、沒有半透明
使用 :visited 偽類選擇器控制顏色的時(shí)候,雖然語法上支持半透明色,但是表現(xiàn)上,要么純色,要么全透明。
例如:
a { color: blue; } a:visited { color: rgba(255,0,0,.5); }
結(jié)果不是半透明紅色,而是純紅色,完全不透明。
四、只能重置,不能憑空設(shè)置
請問下面這段CSS,訪問過的 <a> 元素會(huì)有背景色嗎?
a { color: blue; } a:visited { color: red; background-color: gray; }
HTML為:
<a href="">有背景色嗎?</a>
答案是不會(huì)有背景色,如下截圖:
因?yàn)?:visited 偽類選擇器中的色值只能重置,不能憑空設(shè)置。
我們修改成下面這樣就可以了:
a { color: blue; background-color: white; } a:visited { color: red; background-color: gray; }
此時(shí),文字效果如下截圖:
也就是默認(rèn)需要有一個(gè)背景色,這樣 :visited 的時(shí)候才有有背景色呈現(xiàn)
五、:visited設(shè)置并呈現(xiàn)的色值無法獲取
也就是說,當(dāng)文字顏色值表現(xiàn)為 :visited 選擇器設(shè)置的顏色值的時(shí)候,我們使用JS的getComputedStyle()是獲取不到這個(gè)顏色值的。
已知CSS如下:
a { color: blue; } a:visited { color: red; }
并且我們的鏈接表現(xiàn)為紅色,此時(shí)我們運(yùn)行下面的JavaScript代碼:
window.getComputedStyle(document.links[0]).color;
結(jié)果輸出的是: "rgb(0, 0, 255)" ,也就是藍(lán)色blue對應(yīng)的RGB色值。
1.行內(nèi)樣式,最直接最簡單的一種,直接對HTML標(biāo)簽使用style=""。
2.內(nèi)嵌樣式,就是將CSS代碼寫在之間,并且用進(jìn)行聲明。
3.外部樣式,其中鏈接樣式是使用頻率最高,最實(shí)用的樣式,只需要在之間加上就可以了。其次就是導(dǎo)入樣式,導(dǎo)入樣式和鏈接樣式比較相似,采用@import樣式導(dǎo)入CSS樣式表,不建議使用。
“CSS visited偽類選擇器如何使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。