為什么用.container img:nth-child(1) 實現不了？
老師給出的例子里每個圖都加了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>
2015-06-12
因為你.container img:nth-child(1)這個優先級高于img:hover，所以前面的旋轉啥的屬性會用優先級高的。把.container img:nth-child(1) 中的.container去掉，或者給img:hover加上.container就好了。你的那個類.pic2那個之所以好用也是因為你沒給他前面加.container。你要是加了照樣不好使。