伪类选择器
- 选择元素的状态
1. 未访问状态 link
2. 访问过状态 visited
3. 鼠标悬停状态 hover
4. 点击状态 active
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div{ background-color: rgba(255,0,0,0.5); } /* 未访问 */ a:link { color: yellow; } /* 悬停状态 */ a:hover{ color: blue; } /* 点击状态 */ a:active { color: pink; } /* 访问过状态 */ a:visited { color: rgb(255,0,0); } *{ border: 1px solid red; } </style> </head> <body> <div> <p> <span>abc</span> </p> </div> <a href="../imgs/a.jpg">超链接1</a> <a href="../imgs/m.jpg">超链接2</a> <a href="../imgs/n.jpg">超链接3</a> <a href="../imgs/o.jpg">超链接4</a> </body> </html>