成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

CSS考點(diǎn)之一，<a>標(biāo)簽，偽類(lèi)

LeanCloud / 2309人閱讀

摘要：注意，鼠標(biāo)點(diǎn)擊后不松開(kāi)，此偽類(lèi)一直激活，直到松開(kāi)鼠標(biāo)。哪些偽類(lèi)會(huì)同時(shí)激活并影響顯示效果第一，其實(shí)和兩個(gè)偽類(lèi)之間順序無(wú)所謂。此時(shí)鏈接依然存在，只是已經(jīng)被訪(fǎng)問(wèn)過(guò)，所以偽類(lèi)不再激活。

博主的博客地址：Stillwater的個(gè)人博客
轉(zhuǎn)載請(qǐng)注明原文鏈接

一、標(biāo)簽常用的偽類(lèi)概述 
    a:link{color:blue}                                                     
    a:visited{color:red}
    a:hover{color:green}
    a:active{color:purple}

link 當(dāng)有鏈接，且該鏈接未被訪(fǎng)問(wèn)過(guò)時(shí)，此偽類(lèi)處于激活狀態(tài)。

vistied 某個(gè)鏈接已經(jīng)被訪(fǎng)問(wèn)過(guò)時(shí)，此偽類(lèi)處于激活狀態(tài)。

hover 鼠標(biāo)懸停在某個(gè)鏈接上時(shí)，此偽類(lèi)處于激活狀態(tài)，直到鼠標(biāo)移開(kāi)鏈接。

active 用鼠標(biāo)點(diǎn)擊鏈接時(shí)，此偽類(lèi)激活。注意，鼠標(biāo)點(diǎn)擊后不松開(kāi)，此偽類(lèi)一直激活，直到松開(kāi)鼠標(biāo)。

二、標(biāo)簽偽類(lèi)書(shū)寫(xiě)順序詳解 為什么要考慮偽類(lèi)的書(shū)寫(xiě)順序？

??第一，CSS（Cascading Style Sheets）全稱(chēng)翻譯為層疊樣式表。有時(shí)候多條規(guī)則會(huì)定義元素的同一個(gè)屬性，這時(shí)該怎么辦呢？CSS用層疊的原則來(lái)考慮樣式聲明，從而判斷相互沖突的規(guī)則中哪個(gè)規(guī)則應(yīng)該起作用。首先，你編寫(xiě)的樣式如果與瀏覽器的默認(rèn)樣式?jīng)_突，均以你編寫(xiě)的樣式為準(zhǔn)。在此基礎(chǔ)上，CSS用層疊的原則來(lái)考慮特殊性（specificity）、順序（order）和重要性（importance），從而判斷相互沖突的規(guī)則中哪個(gè)規(guī)則應(yīng)該起作用。不要受這些術(shù)語(yǔ)的影響，你只要去試，就能明白CSS決定該應(yīng)用哪些樣式以及何時(shí)應(yīng)用這些樣式的方式。1
??第二，由于標(biāo)簽的這四個(gè)偽類(lèi)的特殊性是一樣的，所以當(dāng)某個(gè)鏈接處于的狀態(tài)同時(shí)激活多個(gè)偽類(lèi)時(shí)，那么偽類(lèi)的書(shū)寫(xiě)順序就起到了關(guān)鍵作用，從而影響最終的顯示效果。這就是為什么我們要考慮偽類(lèi)的書(shū)寫(xiě)順序。

哪些偽類(lèi)會(huì)同時(shí)激活并影響顯示效果？

??第一，其實(shí):link和:visited兩個(gè)偽類(lèi)之間順序無(wú)所謂。因?yàn)樗鼈z不可能同時(shí)觸發(fā)，即在未訪(fǎng)問(wèn)的同時(shí)訪(fǎng)問(wèn)過(guò)。此處注意，有人將:link理解成只要某元素有鏈接存在，就會(huì)激活，這是錯(cuò)誤的。當(dāng)鏈接被訪(fǎng)問(wèn)過(guò)以后，:link就不再激活。我們做個(gè)試驗(yàn)。

a:visited{color:red}                                                 
a:hover{color:green}
a:active{color:purple}
a:link{color:blue}

??我們把:link放在最后，開(kāi)始時(shí)鏈接未訪(fǎng)問(wèn)，無(wú)論是我鼠標(biāo)懸浮還是點(diǎn)擊，顏色都不會(huì)改變，都是藍(lán)色。當(dāng)我第一次點(diǎn)擊鼠標(biāo)并松開(kāi)后，顏色變成紅色。然后再懸浮就會(huì)變成綠色，再點(diǎn)擊，就會(huì)變成紫色，再松開(kāi)就恢復(fù)成紅色。藍(lán)色不會(huì)再出現(xiàn)。此時(shí)鏈接依然存在，只是已經(jīng)被訪(fǎng)問(wèn)過(guò)，所以:link偽類(lèi)不再激活。
??第二，從用戶(hù)習(xí)慣角度考慮，無(wú)論鏈接訪(fǎng)問(wèn)或未訪(fǎng)問(wèn)過(guò)，都希望當(dāng)鼠標(biāo)懸浮在鏈接上時(shí)能夠產(chǎn)生顏色變化，并且，無(wú)論鏈接訪(fǎng)問(wèn)或未訪(fǎng)問(wèn)過(guò)，產(chǎn)生的顏色變化應(yīng)該是一樣的。所以應(yīng)該把:hover放在:link和:visited后面

a:link{color:blue}                                                 
a:visited{color:red}

a:hover{color:green}

??第三，從用戶(hù)習(xí)慣角度考慮，無(wú)論鏈接訪(fǎng)問(wèn)或未訪(fǎng)問(wèn)過(guò)，都希望當(dāng)鼠標(biāo)點(diǎn)擊鏈接時(shí)能夠產(chǎn)生顏色變化，并且，無(wú)論鏈接訪(fǎng)問(wèn)或未訪(fǎng)問(wèn)過(guò)，產(chǎn)生的顏色變化應(yīng)該是一樣的。所以應(yīng)該把:active放在:link和:visited后面

a:link{color:blue}                                                
a:visited{color:red}

a:active{color:purple}

??第四，順序上，總是先將鼠標(biāo)懸浮在鏈接上，然后才能夠進(jìn)行點(diǎn)擊操作，預(yù)期效果是懸浮時(shí)產(chǎn)生顏色變化，點(diǎn)擊鼠標(biāo)時(shí)產(chǎn)生另一種顏色變化。若把hover放在active后面，當(dāng)點(diǎn)擊鏈接一瞬，實(shí)際你在激活active狀態(tài)的同時(shí)觸發(fā)了hover偽類(lèi),hover在后面覆蓋了active的顏色，所以無(wú)法看到active的顏色。故hover在active之前。2

a:link{color:blue}                                                   
a:visited{color:red}
a:hover{color:green}
a:active{color:purple}

??記住順序的口訣：“LoVe，HA”

HTML5與CSS3基礎(chǔ)教程（第8版）第七章第四節(jié)，[美] Elizabeth Castro　Bruce Hyslop　著，望以文　譯。 ?

引用自 鏈接的四個(gè)偽類(lèi)順序。 ?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115503.html

相關(guān)文章

  • html之css選擇器學(xué)習(xí)

    相關(guān)內(nèi)容：什么是css選擇器標(biāo)簽選擇器類(lèi)選擇器id選擇器并集選擇器（分組選擇器）交集選擇器后代選擇器子標(biāo)簽選擇器屬性選擇器相鄰兄弟選擇器偽類(lèi)選擇器偽元素選擇器（偽對(duì)象選擇器）首發(fā)時(shí)間：2018-03-02 修改：2018-04-30：修改了排版，增加了偽類(lèi)選擇器，偽元素選擇器，在原本簡(jiǎn)略的介紹的基礎(chǔ)上增加了描述并修改了某些術(shù)語(yǔ)描述。2018-05-05：修改了部分偽類(lèi)選擇器的注解，由于之前發(fā)生了小...

    番茄西紅柿 評(píng)論0 收藏0

  • 前端頁(yè)面總結(jié)

    摘要：定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。它的行為就像而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像，它會(huì)固定在目標(biāo)位置。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。以下內(nèi)容部分轉(zhuǎn)載自菜鳥(niǎo)教程CSS層疊樣式表(CascadingStyleSheets)內(nèi)聯(lián)：內(nèi)嵌：外部樣式文件：[object Object]rel 屬性，規(guī)定當(dāng)前文檔與被鏈接文檔/資源之間的關(guān)系。優(yōu)先級(jí)：內(nèi)聯(lián)>內(nèi)嵌>...

    番茄西紅柿 評(píng)論0 收藏0

  • css

    摘要：如內(nèi)可以包含塊級(jí)元素與塊級(jí)元素并列內(nèi)聯(lián)元素與內(nèi)聯(lián)元素并列。而對(duì)于使用脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會(huì)無(wú)視它。css概念　　CSS是Cascading Style Sheets的簡(jiǎn)稱(chēng)，中文稱(chēng)為層疊樣式表，用來(lái)控制網(wǎng)頁(yè)數(shù)據(jù)的表現(xiàn)，可以使網(wǎng)頁(yè)的表現(xiàn)與數(shù)據(jù)內(nèi)容分離。css引入方式1. 行內(nèi)式　　行內(nèi)式是在標(biāo)記的style屬性中設(shè)定CSS樣式。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢(shì)，不推薦使用...

    番茄西紅柿 評(píng)論0 收藏0

  • Chromium 新的彈窗機(jī)制以及 HTML 的 &lt;dialog&gt; 元素

    摘要：在隨后的版本中，團(tuán)隊(duì)一直在修改原生彈窗的表現(xiàn)。所以這種原生彈窗的最大用處不是用來(lái)提示用戶(hù)信息，而是傷害用戶(hù)。團(tuán)隊(duì)在中移除了對(duì)彈窗的支持。獲取用戶(hù)輸入可以用中的元素。作為的元素，目前除了和以外，其它瀏覽器均未支持。 自 1995 年 JavaScript 誕生之初，就包含了 3 個(gè)方法 alert()、confirm() 和 prompt()。在隨后的 Chrome 版本中，Chrome...

    philadelphia 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<