伪类选择器
常用的几种伪类选择器。
伪类选择器一般会用在超链接a标签中
没有访问的超链接a标签样式：
a:link {
color: blue;
}
<!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"> <title>Title</title> <style type="text/css"> .box ul li.item1 a:link{ color: red; } </style> </head> <body> <div class="box"> <ul> <li class="item1"> <a href="#">jack</a> </li> <li class="item2"> <a href="#">ben</a> </li> <li class="item3"> <a href="#">peter</a> </li> </ul> </div> </body> </html>
访问过的超链接a标签样式：
a:visited {
color: gray;
}
<!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"> <title>Title</title> <style type="text/css"> .box ul li.item1 a:visited{ color: green; } </style> </head> <body> <div class="box"> <ul> <li class="item1"> <a href="#">jack</a> </li> <li class="item2"> <a href="#">ben</a> </li> <li class="item3"> <a href="#">peter</a> </li> </ul> </div> </body> </html>
点击jack字体， jack字体变成绿色
鼠标悬停时在元素上应用样式
a:hover {
background-color: #eee;
}
<!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"> <title>Title</title> <style type="text/css"> .box ul li.item1 a:hover{ color: green; } </style> </head> <body> <div class="box"> <ul> <li class="item1"> <a href="#">jack</a> </li> <li class="item2"> <a href="#">ben</a> </li> <li class="item3"> <a href="#">peter</a> </li> </ul> </div> </body> </html>
鼠标悬停时在 a标签jack上面 jack字体马上变成绿色
鼠标点住瞬间的样式：
a:active {
color: green;
}
鼠标点住CSS样式改变，鼠标一放手就恢复原来的CSS样式
<!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"> <title>Title</title> <style type="text/css"> .box ul li.item1 a:active{ color: red; } </style> </head> <body> <div class="box"> <ul> <li class="item1"> <a href="#">jack</a> </li> <li class="item2"> <a href="#">ben</a> </li> <li class="item3"> <a href="#">peter</a> </li> </ul> </div> </body> </html>