伪类选择器
爱恨原则 LVHA
伪类选择器有四种 link,visited, hover ,active
html代码
<div class='box'>
<ul>
<li class="item1">1<a href="#">link</a></li>
<li class="item2">2<a href="#">hover</a></li>
<li class="item3">3<a href="#">visited</a></li>
<li class="item4">4<a href="#">active</a></li>
</ul>
</div>
css代码
/*未访问时*/
.item1 a:link{
color: red;
}
/*鼠标悬停时*/
.item2 a:hover{
font-size: 20px;
}
/*访问过后*/
.item3 a:visited{
color: black;
}
/*鼠标点击时*/
.item4 a:active{
color: yellow;
}
nth-child的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.item1 a:link{
color: red;
}
.item2 a:hover{
font-size: 20px;
}
.item3 a:visited{
color: black;
}
.item4 a:active{
color: yellow;
}
/*n表示选中所有 从0开始的 0的时候表示没有选中*/
.box ul li:nth-child(6){
font-size: 30px;
}
/*奇数*/
.box ul li:nth-child(2n-1){
color: green;
}
/*偶数*/
.box ul li:nth-child(2n){
color: red;
}
/*隔几个 */
.box ul li:nth-child(5n+1){
font-family: "微软雅黑";
color: #e0e0e0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">1<a href="#">link</a></li>
<li class="item2">2<a href="#">hover</a></li>
<li class="item3">3<a href="#">visited</a></li>
<li class="item4">4<a href="#">active</a></li>
<li class="item4">5<a href="#">天王盖地虎</a></li>
<li class="item4">6<a href="#">天王盖地虎</a></li>
<li class="item4">7<a href="#">天王盖地虎</a></li>
<li class="item4">8<a href="#">天王盖地虎</a></li>
<li class="item4">9<a href="#">天王盖地虎</a></li>
<li class="item4">10<a href="#">天王盖地虎</a></li>
<li class="item4">11<a href="#">天王盖地虎</a></li>
<li class="item4">12<a href="#">天王盖地虎</a></li>
</ul>
</div>
</body>
</html>