a 標簽的偽類的正確順序,以及原因



注意,a 標簽的偽類是有順序的,否則有可能樣式不對;lvha, 
原因:瀏覽器的就近原則,舉個例子:
我定義的順序是a:visited、a:hover、a:link,這時候就會發現,不管我有沒有hover上去,樣式都是link的樣式的,這是因為鼠標經過的未訪問鏈接同時擁有a:link、a:hover兩種屬性,在第一種情況下,a:link離它最近,所以它優先滿足a:link,而放棄a:hover的重復定義。 

所以,如果一個鏈接沒有被訪問過,那么它有可能同時擁有 link , hover 兩個屬性,不能讓 link 寫在后面,否則不管 hover 是否,都會顯示link的樣式;同樣的道理,如果一個鏈接已經被訪問過了,那么它有可能同時擁有visited , hover 兩個屬性,hover 要在 visited 的后面;

所以,我們總結出,要想讓一個鏈接各個階段都正常呈現樣式,正確的順序是 lvha ;

另外 :link 和 a的樣式有可能會沖突
    
    
    
            
  1. #test{
  2. color:yellow;
  3. }
  4. #test:link{
  5. color:red!important;
  6. }
  7. <a href="#" id="test">sss</a>
總結:當 <a> 標簽的  href 屬性為空的時候,:link樣式不會生效,所以正常的  color : yellow 會生效;當 <a> 標簽的 href 屬性不為空的時候,:link 樣式才會生效,這時候,如果 <a> 標簽正常樣式 和 a:link 沖突了的話,以寫在后面的那個為准;





免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM