伪类选择器

伪类选择器

爱恨原则 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>
posted @ 2018-05-26 23:29  Jason_lincoln  阅读(168)  评论(0)  编辑  收藏  举报