淺談偽類-以<a>標簽為例子

在CSS選擇器中,有那么一些用于實現特殊效果的選擇器,我們稱之為偽類,具體來說我也說不太清除,這里就只能簡單的和大家談談我的看法。

大部分時候選擇使用偽類是為了實現一些動態的效果,即在某些操作后使用別的CSS樣式,有點類似于觸動一些方法去改變CSS樣式,甚至在很多的課程中,很多曾經的偽類都推薦通過自定義方法改變CSS內容來實現。這就是我個人對偽類的一些理解。

但今天還不談這些,我想給大家講個例子,方便大家來了解偽類,即標題中提到的<a>標簽的偽類。我覺得這是一個很好的例子,因為這個例子在實際的開發中可以說有很廣泛的應用,從而也導致了很多的筆試中喜歡去考察這個點,這里我就以此為例講一講。

<a>標簽主要涉及四個偽類,分別是以下四個:

  • :link //正常樣式,即未操作前的樣式
  • :visited //已經訪問過的樣式
  • :hover //鼠標放置在上面的樣式
  • :active //觸發時的樣式

以上就是就是<a>標簽上常用的四個偽類,其中所能選擇去涉及的內容就更是多種多樣了,這里我就跳出兩個較為常用內容color(字體顏色)和text-decoration(下劃線)給大家個示例看一下吧:

a:link{
  color: #000;
  text-decoration: underline;
}

a:visited{
  color: red;
  text-decoration: none;
}

a:hover{
  color: blue;
  text-decoration: none;
}

a:active{
  color: green;
  text-decoration: none;
}

上面就是個很基礎的例子,但我覺得對于理解偽類是一個很不錯的內容,大家可以自己去感受一下,寫完對照上面所提到的功能去具體試一下。

這里給大家提個細節,大家思考一個問題,就是上面我所寫的樣式是有一定順序的,這個順序有沒有影響呢?換個順序結果會不會產生變化?如果時間夠的話,我推薦大家親自動手試一試再來回答這個問題。

這里我就先告訴大家答案了,上面的順序是很重要的,如果改變了你會發現有的變化會產生缺失,部分效果你是會看不見的,具體多少個效果呢?這個就要視情況而定了,最極端的例子是你吧:link放最后,你就會驚喜的發現所有的例子都沒用了。

這是為什么呢?這就涉及到CSS樣式的優先級問題了,當某個元素有多個樣式,且樣式中存在某個或某幾個屬性相同但屬性值不同的情況時,就會產生沖突,而沖突產生了我們就需要去處理,即只能選擇某一個值去實現,在CSS中默認的處理方式是選擇靠后的那個樣式中的屬性,就像往桌子上放書的后面面放上來的會壓住前面放上來的,當然也存在特例,比如!important,你可以在某條屬性后加上一條這個,這個屬性就會脫穎而出了,具體用法和一些兼容性大家自己去了解一下吧。

上面講了一些原理,但其實這還不是全部原因的,接下來我簡單和大家分析回到我們這個例子中為什么會這樣吧。偽類所設置的樣式其實我們可以理解為正常情況下是不存在的,只有在一定條件下觸發才對出現,而如果我們把:link放最下面,那別的樣式觸發時也是會被它覆蓋掉的,從某種角度上來說,偽類是只有開沒有關的,可能這樣說有點絕對,但在這個例子李基本是這樣的,他通過打開,然后利用一定的順序覆蓋掉樣式,從而實現變化,故當你順序不對的時候,就會導致一些錯誤。

至于這個順序,我不推薦大家去硬背,而是你搞懂我上面所提的內容,理解性的去對應情況分析,相信你能夠很輕松的對這個內容形成有效的記憶,就算記不下來,到時候自己推問題應該也不大的。偽類這個內容隨著技術的變革已經越來越復雜,想要完全搞懂我覺得是很困難的,這里就簡單的和大家分享一些我的理解,希望大家能有所收獲。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,749評論 1 45
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,814評論 1 92
  • 本文轉載自:眾成翻譯譯者:為之漫筆鏈接:http://www.zcfy.cc/article/239原文:http...
    極樂君閱讀 7,412評論 1 62
  • 學會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,343評論 2 66
  • 每天9點半到11點半,是我的太極時間。在小區湖邊的大樹下,有一塊臥牛之地,以前松松軟軟長著小草的泥土已經被踩得很結...
    太極一丁閱讀 246評論 0 1