在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放最下面,那別的樣式觸發時也是會被它覆蓋掉的,從某種角度上來說,偽類是只有開沒有關的,可能這樣說有點絕對,但在這個例子李基本是這樣的,他通過打開,然后利用一定的順序覆蓋掉樣式,從而實現變化,故當你順序不對的時候,就會導致一些錯誤。
至于這個順序,我不推薦大家去硬背,而是你搞懂我上面所提的內容,理解性的去對應情況分析,相信你能夠很輕松的對這個內容形成有效的記憶,就算記不下來,到時候自己推問題應該也不大的。偽類這個內容隨著技術的變革已經越來越復雜,想要完全搞懂我覺得是很困難的,這里就簡單的和大家分享一些我的理解,希望大家能有所收獲。