真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

怎么在CSS中使用visited偽類(lèi)選擇器

這篇文章主要介紹了怎么在CSS中使用visited偽類(lèi)選擇器的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇怎么在CSS中使用visited偽類(lèi)選擇器文章都會(huì)有所收獲,下面我們一起來(lái)看看吧。

創(chuàng)新互聯(lián)公司是一家專(zhuān)注于成都網(wǎng)站建設(shè)、成都網(wǎng)站制作與策劃設(shè)計(jì),波密網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:波密等地區(qū)。波密做網(wǎng)站價(jià)格咨詢(xún):18982081108

首字母連起來(lái)是LVHA,順序完全符合love-hate,也就是愛(ài)恨,所謂由愛(ài)生恨,這樣順序就記住了。

目前這個(gè)年代, :link 這個(gè)偽類(lèi)用得已經(jīng)不多了,但作用還是有的,我們平時(shí)用得比較多的都是直接設(shè)置 元素的顏色,例如:

a { color: blue; }

實(shí)際上,下面這種要更合適,更規(guī)范:

a:link { color: blue; }

兩者有什么區(qū)別呢?

區(qū)別在下面,下面兩個(gè) 元素,前者可以匹配 a:link 選擇器,但后者卻只能匹配 a 選擇器:

文字
文字2

例如我很喜歡移除 href 屬性表示 元素按鈕的禁用態(tài),使用 a:link 禁用和非禁用的CSS就更好控制了。

只是我們使用 a:link 選擇器的時(shí)候, a:visited 選擇器也一定要設(shè)置(因?yàn)?a:link 在最前面),不然訪問(wèn)過(guò)的鏈接顏色就會(huì)跟著系統(tǒng)或者當(dāng)前元素設(shè)置的 color 走,表現(xiàn)反而有些亂,因此,當(dāng)下已經(jīng)很少見(jiàn)到使用 :link 偽類(lèi)選擇器的了。

而 :visited 偽類(lèi)選擇器依然很有用,尤其在列表式鏈接站點(diǎn),例如文章列表,章節(jié)列表,可以讓用戶(hù)知道這篇文章我已經(jīng)看過(guò)了,算是比較友好的一種體驗(yàn)處理。

二、:visited偽類(lèi)選擇器支持CSS很有限

或許是出于安全考慮, :visited 偽類(lèi)選擇器支持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í),類(lèi)似 ::before , ::after 這些偽元素都不支持,例如,我們希望使用文字標(biāo)示已經(jīng)訪問(wèn)過(guò)的鏈接,如下:

a:visited::after{content:'visited';}  // 注意,不支持

不好意思,想法雖好,但沒(méi)有任何瀏覽器支持,請(qǐng)死了這條心。

不過(guò)好在 :visited 偽類(lèi)支持子選擇器,不過(guò),所能控制的CSS屬性和 :visited 一模一樣,就那幾個(gè)和顏色相關(guān)的CSS屬性,也不支持 ::before , ::after 這些偽元素。

例如:

a:visited span{color: red;}
文字visited

如果鏈接是瀏覽器訪問(wèn)過(guò)的,則 元素文字顏色就會(huì)直紅色,如下截圖示意:

怎么在CSS中使用visited偽類(lèi)選擇器

于是,我們就可以下面這種方法實(shí)現(xiàn)訪問(wèn)過(guò)的鏈接文字后面跟一個(gè)visited字樣。HTML如下:

文字

CSS如下:

small { position: absolute; color: white; } // 這里設(shè)置color: transparent無(wú)效
small::after { content: 'visited'; }
a:visited small { color: purple; }

怎么在CSS中使用visited偽類(lèi)選擇器

除了支持的CSS有限,:visited偽類(lèi)選擇器還有不少其他奇怪的特性。

三、沒(méi)有半透明

使用 :visited 偽類(lèi)選擇器控制顏色的時(shí)候,雖然語(yǔ)法上支持半透明色,但是表現(xiàn)上,要么純色,要么全透明。

例如:

a { color: blue; }
a:visited { color: rgba(255,0,0,.5); }

結(jié)果不是半透明紅色,而是純紅色,完全不透明。

怎么在CSS中使用visited偽類(lèi)選擇器

四、只能重置,不能憑空設(shè)置

請(qǐng)問(wèn)下面這段CSS,訪問(wèn)過(guò)的 元素會(huì)有背景色嗎?

a { color: blue; }
a:visited { color: red; background-color: gray; }

HTML為:

有背景色嗎?

答案是不會(huì)有背景色,如下截圖:

怎么在CSS中使用visited偽類(lèi)選擇器

因?yàn)?:visited 偽類(lèi)選擇器中的色值只能重置,不能憑空設(shè)置。

我們修改成下面這樣就可以了:

a { color: blue; background-color: white; }
a:visited { color: red; background-color: gray; }

此時(shí),文字效果如下截圖:

怎么在CSS中使用visited偽類(lèi)選擇器

也就是默認(rèn)需要有一個(gè)背景色,這樣 :visited 的時(shí)候才有有背景色呈現(xiàn)

五、:visited設(shè)置并呈現(xiàn)的色值無(wú)法獲取

也就是說(shuō),當(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對(duì)應(yīng)的RGB色值。

關(guān)于“怎么在CSS中使用visited偽類(lèi)選擇器”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“怎么在CSS中使用visited偽類(lèi)選擇器”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。


分享名稱(chēng):怎么在CSS中使用visited偽類(lèi)選擇器
分享網(wǎng)址:http://weahome.cn/article/psocij.html

其他資訊

在線(xiàn)咨詢(xún)

微信咨詢(xún)

電話(huà)咨詢(xún)

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部