为什么用.container img:nth-child(1) 实现不了？
muge10
2015-05-10 22:23
老师给出的例子里每个图都加了class，我想用 nth-child 来选择，就不用添加类了。但是用 .container img:nth-child(1) 只能实现 box-shadow 不能实现旋转和缩放，为什么呢？用类的时候是能实现的。以下是代码：
CSS代码：
body {
background: #eee;
}
h1 {
text-align: center;
}
.container {
width: 960px;
height: 450px;
margin: 60px auto;
position: relative;
border: 1px solid #000;
}
img {
padding: 10px;
background: #fff;
border: 1px solid #ddd;
position: absolute;
-webkit-transition: .4s;
-o-transition: .4s;
transition: .4s;
}
/*这里用 nth-child 只能出现阴影，无法实现旋转和缩放，为什么？*/
.container img:nth-child(1) {
top: 0px;
left: 200px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/*这里用类是能实现所有效果的*/
img.pic2 {
top: 50px;
left: 400px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
img:hover {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, .5);
box-shadow: 10px 10px 15px rgba(0, 0, 0, .5);
}
以下是HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3照片墙</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<h1>照片墙制作</h1>
<div class="container">
<img src="images/mm1.jpg" >
<img src="images/mm2.jpg" >
<img src="images/mm3.jpg" >
<img src="images/mm4.jpg" >
<img src="images/mm5.jpg" >
<img src="images/mm6.jpg" >
<img src="images/mm7.jpg" >
<img src="images/mm8.jpg" >
<img src="images/mm9.jpg" >
<img src="images/mm10.jpg" >
</div>
</body>
</html>
1回答
-
- 珈蓝小羊人
- 2015-06-12 18:05:25
因为你.container img:nth-child(1)这个优先级高于img:hover，所以前面的旋转啥的属性会用优先级高的。把.container img:nth-child(1) 中的.container去掉，或者给img:hover加上.container就好了。你的那个类.pic2那个之所以好用也是因为你没给他前面加.container。你要是加了照样不好使。
CSS3绚丽照片墙
56605 学习 · 63 问题
相似问题