溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css超鏈接偽類的作用有哪些”，在日常操作中，相信很多人在css超鏈接偽類的作用有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css超鏈接偽類的作用有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
4種css超鏈接偽類的作用：1、“:link”，定義正常鏈接的樣式；2、“:visited”，定義已訪問過鏈接的樣式；3、“:hover”，定義鼠標懸浮在鏈接上時的樣式；4、“active”，定義鼠標點擊鏈接時的樣式。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
因為我們要定義鏈接樣式，所以其中必不可少的就是超級鏈接中的錨標簽--a，錨標簽和偽類鏈接起來書寫的方法就是定義鏈接樣式的基礎方法，它們的寫法如下：
a:link，定義正常鏈接的樣式；
a:visited，定義已訪問過鏈接的樣式；
a:hover，定義鼠標懸浮在鏈接上時的樣式；
a:active，定義鼠標點擊鏈接時的樣式。
其中：:link和:visited只能適用于設置超鏈接a，:hover和:active則可適用所有元素
:hover 用來表示鼠標移入的狀態
:active 用來表示鼠標點擊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超鏈接的偽類</title> <link rel="stylesheet" href="../css/a.css"> </head> <body> <a href="https://www.12345.com/" target="__blank">沒訪問過的鏈接</a> <br> <a href="https://www.csdn.net/" target="__blank">訪問過的鏈接</a> </body> </html>
/* 沒訪問過的鏈接狀態 */
a:link{
font-size: 20px;
color: hotpink;
}
/* 訪問過的鏈接狀態 */
a:visited{
color: green;
}
/* 鼠標移入鏈接時的狀態 */
a:hover{
color: rgb(0, 217, 255);
}
/* 鼠標點擊鏈接時的狀態 */
a:active{
color: rgb(255, 0, 0);
}
注意：只要曾經搜索過都算訪問過的，除非清除歷史瀏覽緩存數據。
偽元素，頁面中一些特殊的并不真實存在的元素，偽元素表示一些特殊的位置。偽元素使用 :: 開頭
::first-letter 表示第一個字母
::first-line 表示第一行
::selection 表示選中的內容
::before 元素的開始
::after 元素的最后
注意：
1、因為設置::before和::after沒有任何效果，所以::before和::after必須結合content屬性來使用。 2、content內添加的內容鼠標無法選中。
3、html中的q標簽表示短引用，有增加雙引號效果，原理是運用了::before和::after屬性，content中加上了雙引號，所以q標簽的雙引號也無法選中。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>偽元素</title> <link rel="stylesheet" href="../css/pseudo_element.css"> </head> <body> <h4>WHERE THERE IS A WILL, THERE IS A WAY</h4> <p>The secret of success (The key to success) is not so much money as a strong will. A great man is one who has a strong will and an indomitable spirit. In other words, if a man does not have a strong will to win (get) the final victory, he will never succeed in his life. He is no more than a failure.It is quite obvious that there is no difficult thing (nothing difficult) in the world. if you make up your mind to do it, you will certainly accomplish your end. That stands to reason.</p> </body> </html>
/* 第一個字母設置像素為50px */
::first-letter{
font-size: 50px;
}
/* 第一行設置綠色 */
::first-line{
color: green;
}
/* 鼠標選中的字體背景設置為橙色 */
::selection{
background-color: sandybrown;
}
/* 元素p內容開始之前添加符號 ?，結尾添加符號?，注意該符號鼠標無法被選中*/
p::before{
content: "?";
}
p::after{
content: "?";
}
到此，關于“css超鏈接偽類的作用有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
