页码1中用.active设置color是白色为什么显示的仍是黑色-慕课网

首页课程实战体系课手记专栏慕课教程

页码1中用.active设置color是白色为什么显示的仍是黑色

来源：4-7 编程练习

fxh123

2015-06-21 22:11

页码1中用.active设置color是白色为什么显示的仍是黑色

写回答关注

4回答

慕粉3135539

2016-04-20 19:51:15

因为.page a:link, .page a:visited{}比。active{}的权值高，所以显示的是前面的样式

0 0
浅唱or轻吟

2016-04-11 22:34:14

的确黑色,,为什么

0 0

fxh123: 2015-06-22 13:56:37

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页码的制作</title>
<style>
/*在此定义相关CSS样式*/
* {
	margin: 0;
	padding: 0;
	font-size: 12px;
}
.page {
	height: 40px;
	margin-top: 10px;
	text-align: center;
}
.page a {
	display: inline-block;
	border: 1px solid #E8E8E8;
	text-decoration: none;
	margin: 5px;
	padding: 5px 10px;
}
.page a:link, .page a:visited {
	color: #000;
}
.page a:hover, .page a:active {
	color: #FFF;
	background-color: #cc1b1b;
}
.active {
	background-color: #cc1b1b;
	color: #FFF;
}
</style>
</head>

<body>
<!--在此制作页码的基本结构-->
<div class="page"> <a href="#">首页</a><a href="#">&lt;</a><a href="#" class="active">1</a><a href="#">2</a><a href="#">3</a><a href="#">…</a><a href="#">&gt;</a><a href="#">末页</a> </div>
</body>
</html>

0 0