今天同样按书上的范例敲完代码，发现伪类设置没有生效，鼠标经过时，字体没有变红，经仔细检查，原来代码a:hover之间多了一个空格，结果伪类不生效，可见，昨天的CSS代码样式不生效，应该也是我把那里搞错了，今天范例的代码如下：
cT2IT米工网
3.2.3 多图排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body{
margin:20px;
padding:0px;
text-alien:center;
}
.container{
width:800px;
height:240px;
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
border:1px #000 solid;
}
.container div{
float:left;
}
.one{
margin-top:30px;
margin-left:35px;
}
.container p{
font-size:20px;
font-family:黑体;
}
a{
text-decoration:none;
color:#204402;
}
a img{border:4px white solid;}
a:hover{
text-decoration:underline;
color:red;
}
a:hover img{
border:4px #0b35c0 solid;
}
</style>
</head>
<body>
<div class="container">
<div class="one">
<a href="#">
<img src="images/1.jpg" alt="">
<p>老虎</p>
</a>
</div>
<div class="one">
<a href="#">
<img src="images/2.jpg" alt="">
<p>大熊猫</p>
</a>
</div>
<div class="one">
<a href="#">
<img src="images/3.jpg" alt="">
<p>大象</p>
</a>
</div>
<div class="one">
<a href="#">
<img src="images/4.jpg" alt="">
<p>野马</p>
</a>
</div>
</div>
</body>
</html>
cT2IT米工网