成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS考點之一，<a>標(biāo)簽，偽類

LeanCloud / 2358人閱讀

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

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

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

link 當(dāng)有鏈接，且該鏈接未被訪問過時，此偽類處于激活狀態(tài)。

vistied 某個鏈接已經(jīng)被訪問過時，此偽類處于激活狀態(tài)。

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

active 用鼠標(biāo)點擊鏈接時，此偽類激活。注意，鼠標(biāo)點擊后不松開，此偽類一直激活，直到松開鼠標(biāo)。

二、標(biāo)簽偽類書寫順序詳解 為什么要考慮偽類的書寫順序？

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

哪些偽類會同時激活并影響顯示效果？

??第一，其實:link和:visited兩個偽類之間順序無所謂。因為它倆不可能同時觸發(fā)，即在未訪問的同時訪問過。此處注意，有人將:link理解成只要某元素有鏈接存在，就會激活，這是錯誤的。當(dāng)鏈接被訪問過以后，:link就不再激活。我們做個試驗。

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

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

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

a:hover{color:green}

??第三，從用戶習(xí)慣角度考慮，無論鏈接訪問或未訪問過，都希望當(dāng)鼠標(biāo)點擊鏈接時能夠產(chǎn)生顏色變化，并且，無論鏈接訪問或未訪問過，產(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)行點擊操作，預(yù)期效果是懸浮時產(chǎn)生顏色變化，點擊鼠標(biāo)時產(chǎn)生另一種顏色變化。若把hover放在active后面，當(dāng)點擊鏈接一瞬，實際你在激活active狀態(tài)的同時觸發(fā)了hover偽類,hover在后面覆蓋了active的顏色，所以無法看到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　著，望以文　譯。 ?

引用自 鏈接的四個偽類順序。 ?

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/115503.html

相關(guān)文章

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

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

    番茄西紅柿 評論0 收藏0

  • 前端頁面總結(jié)

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

    番茄西紅柿 評論0 收藏0

  • css

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

    番茄西紅柿 評論0 收藏0

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

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

    philadelphia 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<