CSS考點之一，<a>標簽，偽類

LeanCloud 發布于2019-08-30 13:21 / 2306人閱讀

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

博主的博客地址：Stillwater的個人博客
轉載請注明原文鏈接

一、標簽常用的偽類概述

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

link 當有鏈接，且該鏈接未被訪問過時，此偽類處于激活狀態。

vistied 某個鏈接已經被訪問過時，此偽類處于激活狀態。

hover 鼠標懸停在某個鏈接上時，此偽類處于激活狀態，直到鼠標移開鏈接。

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

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

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

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

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

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

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

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

a:hover{color:green}

??第三，從用戶習慣角度考慮，無論鏈接訪問或未訪問過，都希望當鼠標點擊鏈接時能夠產生顏色變化，并且，無論鏈接訪問或未訪問過，產生的顏色變化應該是一樣的。所以應該把:active放在:link和:visited后面

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

a:active{color:purple}

??第四，順序上，總是先將鼠標懸浮在鏈接上，然后才能夠進行點擊操作，預期效果是懸浮時產生顏色變化，點擊鼠標時產生另一種顏色變化。若把hover放在active后面，當點擊鏈接一瞬，實際你在激活active狀態的同時觸發了hover偽類,hover在后面覆蓋了active的顏色，所以無法看到active的顏色。故hover在active之前。²

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

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

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

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

GPU云服務器云服務器 asp &lt&gt asp &lt= &gt aspx &lt&gt aspx &lt=&gt

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115503.html

html之css選擇器學習

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

番茄西紅柿 2019-04-23 13:46 評論0 收藏0
前端頁面總結

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

番茄西紅柿 2019-04-23 11:40 評論0 收藏0
css

摘要：如內可以包含塊級元素與塊級元素并列內聯元素與內聯元素并列。而對于使用脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。css概念　　CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網頁數據的表現，可以使網頁的表現與數據內容分離。css引入方式1. 行內式　　行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用...

番茄西紅柿 2019-04-23 13:25 評論0 收藏0
Chromium 新的彈窗機制以及 HTML 的 <dialog> 元素

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

philadelphia 2019-08-29 12:49 評論0 收藏0