日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

a元素的幾種偽類選擇器

作者：SSS4362 更新時間： 2022-07-10 編程語言

a元素的幾種偽類選擇器

1.默認選中狀態link

a.語法

a:link{
    /*樣式值的設置*/
    樣式1:樣式值1;
    樣式2:樣式值2;
    .....
    樣式n:樣式值n;
}

b.源代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a標簽的四種偽類選擇器</title>
    <style type="text/css">
         *{
          /* 清除瀏覽器默認樣式的影響 */
          padding: 0;
          margin: 0;
         }
         /* 如果不設置的話,默認就是藍色文字,藍色下劃線 */
         a:link{
            /* 設置默認未選中時超鏈接里面的文字顏色為red(紅色) 
            */
           color: red;
           /* 消除下劃線 */
           text-decoration: none;
         }
    </style>    
</head>
<body>
   <a href="#">成功不會辜負日復一日的堅持的!!!</a>
</body>
</html>

c.展示效果

在這里插入圖片描述

2.懸停狀態hover

a.語法

a:hover{
   /*樣式值的設置*/
    樣式1:樣式值1;
    樣式2:樣式值2;
    .....
    樣式n:樣式值n;
}

b.源代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a標簽的四種偽類選擇器</title>
    <style type="text/css">
         *{
          /* 清除瀏覽器默認樣式的影響 */
          padding: 0;
          margin: 0;
         }
         a:hover{
           color: skyblue;
           /* 消除下劃線 */
           text-decoration: none;
         }
    </style>    
</head>
<body>
   <a href="#">成功不會辜負日復一日的堅持的!!!</a>
</body>
</html>

c.展示效果(鼠標懸停時的狀態)

在這里插入圖片描述

3.正在點擊狀態active

a.語法

a:active{
   /*樣式值的設置*/
    樣式1:樣式值1;
    樣式2:樣式值2;
    .....
    樣式n:樣式值n;
}

b.源代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a標簽的四種偽類選擇器</title>
    <style type="text/css">
         *{
          /* 清除瀏覽器默認樣式的影響 */
          padding: 0;
          margin: 0;
         }
         a:active{
           color: pink;
           /* 消除下劃線 */
           text-decoration: none;
         }
    </style>    
</head>
<body>
   <a href="#">成功不會辜負日復一日的堅持的!!!</a>
</body>
</html>

c.展示效果

在這里插入圖片描述

4.點擊后狀態visited

a.語法

a:visited{
   /*樣式值的設置*/
    樣式1:樣式值1;
    樣式2:樣式值2;
    .....
    樣式n:樣式值n;
}

b.源代碼

/*
a:visited存在漏洞,黑客可以通過判斷下劃線是否被去掉來判斷用戶訪問了哪些網站
這是會造成信息的泄露的,因此瀏覽器限制了visited里面是不能更改瀏覽器的下劃線的!!!
*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a標簽的四種偽類選擇器</title>
    <style type="text/css">
         *{
          /* 清除瀏覽器默認樣式的影響 */
          padding: 0;
          margin: 0;
         }
         a:visited{
           color: green;
           /* 消除下劃線,無效,因為瀏覽器有限制*/
           text-decoration: none;
         }
    </style>    
</head>
<body>
   <a href="https://www.baidu.com">成功不會辜負日復一日的堅持的!!!</a>
</body>
</html>

c.展示效果

在這里插入圖片描述

5.寫在一個css中的書寫順序

a.語法

遵循LVHA的順序(首字母)

a:link{
   /*樣式值的設置*/
    樣式1:樣式值1;
    樣式2:樣式值2;
    .....
    樣式n:樣式值n;
}
a:visited{
   /*樣式值的設置*/
    樣式1:樣式值1;
    樣式2:樣式值2;
    .....
    樣式n:樣式值n;
}
a:hover{
   /*樣式值的設置*/
    樣式1:樣式值1;
    樣式2:樣式值2;
    .....
    樣式n:樣式值n;
}
a:active{
   /*樣式值的設置*/
    樣式1:樣式值1;
    樣式2:樣式值2;
    .....
    樣式n:樣式值n;
}

b.源代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a標簽的四種偽類選擇器</title>
    <style type="text/css">
         *{
          /* 清除瀏覽器默認樣式的影響 */
          padding: 0;
          margin: 0;
         }
         a:link{
           color: black;
           /* 消除下劃線 */
           text-decoration: none;
         }
         a:visited{
           color: green;
           /* 消除下劃線,無效,因為瀏覽器有限制*/
           text-decoration: none;
         }
         a:hover{
           color: gray;
           text-decoration: none;
         }
         a:active{
           color: blueviolet;
           text-decoration: none;
         }
    </style>    
</head>
<body>
   <a href="https://www.baidu.com">成功不會辜負日復一日的堅持的!!!</a>
</body>
</html>

c.展示效果

link時的狀態

在這里插入圖片描述

visited時的狀態

在這里插入圖片描述

hover時的狀態

在這里插入圖片描述

active時的狀態

在這里插入圖片描述

原文鏈接：https://blog.csdn.net/SSS4362/article/details/125478859

欄目分類
最近更新