前端基礎HTML---偽類選擇器
阿新 • • 發佈：2021-06-29
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>偽類選擇器</title> <style type="text/css"> /* 偽類專門用來表示元素的一種特殊的狀態 比如: 訪問過的超連結,比如普通的超連結,比如獲取焦點的文字框 當我們需要為處在這些特殊狀態的元素設定樣式時,我們可以使用偽類 正常連結 - a:link 訪問過的連結 - a:visited (只能定義字型顏色) 滑鼠滑過的連結 - a:hover 正在點選的連結 - a:active :hover和:active也能為其他元素設定 IE6中不支援對超連結以外的元素設定:hover和:active 獲取焦點 - :focus 指定元素前 - :before 指定元素後 - :after 選中的元素 - ::selection*/ /* 沒訪問過得顏色 */ a:link{ color: #7FFF00; } /* 訪問過的顏色 由於涉及到使用者的隱私問題,所以使用visited偽類只能設定字型的顏色 */ a:visited{ color: red; } /* 滑鼠移過連結的顏色 */ a:hover{ color: #FF8C00; } /* 滑鼠點選連結時的顏色 */ a:active{ color: #8A2BE2; }/* 獲取焦點狀態 IE6不支援 */ input:focus{ background-color: yellow; } /* 為p標籤中選中的內容使用樣式 selection選中內容 注意: 這個偽類在火狐中需要採用另一種方式編寫 ::-moz-selection */ /* 相容大部分瀏覽器 */ p::selection{ background-color: yellow; } /* 相容火狐 */ p::-moz-selection{ background-color: #FF8C00; } </style> </head> <body> <a href="https://v3.bootcss.com/">訪問過的連結</a> <a href="https://www.bootcdn.cn/">沒訪問過的連結</a> <input type="text"/> <p>selection選中內容</p> </body> </html>