伪类选择器
常用的几种伪类选择器。
伪类选择器一般会用在超链接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>
