CSS學習筆記-03- 過渡模塊以前奏篇 a標籤的僞類選擇器

時間 2019-11-05

標籤 css 學習筆記過渡模塊前奏標籤選擇器欄目 CSS 简体版

原文原文鏈接

CSS3 2D轉換
CSS3 3D轉換
CSS3 過渡
CSS3 動畫html

CSS3 的四大金剛。學習

想要實現酷炫的視覺效果，上面4個是必需要掌握的。學習以前，先複習一下視覺盛宴的前菜：a標籤的僞類選擇器動畫

鐺鐺，擡頭看黑板，先劃重點:ui

**注意點：spa

1.a標籤的僞類選擇器能夠單獨出現，也能夠一塊兒出現。若是一塊兒出現，有嚴格的順序要求。編寫能夠遵循愛恨原則 - love hate (Link visited hover active )code

如下是所有代碼：htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* a標籤存在必定的默認狀態。
        所謂a標籤的僞類選擇器，就是專門修改a標籤不一樣狀態下的樣式的。

        1.默認狀態(從未訪問過狀態下的樣式) -- link 
        2.被訪問過的狀態  --visited
        3.鼠標長按的狀態（按上不鬆手）--active
        4.鼠標懸停   --hover
        
         */

        a:link{
            color: tomato;
        }
        
        a:visited{
            color:green;
        }
        a:hover{
            color:orange;
        }

        a:active{
            color:pink;
        }
    
    </style>
</head>
<body>
    <a href="https://618.tmall.com/">taobao</a>
    <a href="https://sale.jd.com/">jd</a>
</body>
</html>