变换：scale和：nth-​​child（）选择器不起作用

Question

我目前正在学习HTML5 / CSS / jQuery。我想用基于CSS的动画做一个简单的文章缩略图。我正在使用CodePen轻松分享这些小东西。不幸的是我发现了一些问题，我不知道如何解决。

1。比例变换 我的第一个问题是缩放变换，它被添加到类.singleArticle不起作用。它可能是因为与其他一些类相混淆，但我找不到它。

.singleArticle:hover {
   -webkit-box-shadow: 0 10px 20px 5px rgba(1, 1, 1, 0.1);
   box-shadow: 0 10px 20px 5px rgba(1, 1, 1, 0.1);
   -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   -o-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
}

2。 FontAwsome 第二个问题是：nth-​​child（）选择器。我想了解它在实践中是如何工作的（这就是我在这里使用它的原因）。我已经尝试了很多东西，无法找到错误的位置。

.singleArticle .cover {
   height: 250px;
   background-size: cover;
   background: #ccc;
   width: 100%;
   color: white;
   background-position: center;
   background-size: cover;
}

.singleArticle .cover:nth-child(1) {
   background-image: url("http://www.surfermag.com/wp-content/uploads/2015/12/DecodingStyle_5.jpg");
}

.singleArticle .cover:nth-child(2) {
   background-image: url("http://www.fatbmx.com/uploads4/2014Q1/viki1.jpg");
}

第3。 Firefox浏览器 所有块在firefox中都是不可见的。也找不到任何解决方案。

你能指出，我在哪里犯错误，拜托？可能最简单的方法就是看看codepen，因为在这里放置整个代码可能不是最好的选择。

http://codepen.io/danzawadzki/pen/vymVed

Answer 1

For point 2, nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent, so 'n' can be a number, formula, keyword. You can refer https://css-tricks.com/almanac/selectors/n/nth-child/ .

For point 3, please remove the opacity: 0 under .singleArticle. 

.singleArticle {
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    background: #fff;
    width: 430px;
    display: inline-block;
    margin: 15px;
}

Answer 2

应该可以正常工作。

.singleArticle .cover {
  /* You can just use 'background' */
  background: #ccc url("") center/cover no-repeat;
  color: white;
  height: 250px;
}

/* nth-child selector for .singleArticle, that applies to .cover */

.singleArticle:nth-child(1) .cover {
  background-image: url("http://www.surfermag.com/wp-content/uploads/2015/12/DecodingStyle_5.jpg");
}
.singleArticle:nth-child(2) .cover {
  background-image: url("http://www.fatbmx.com/uploads4/2014Q1/viki1.jpg");
}
.singleArticle:hover {
  box-shadow: 0 10px 20px 5px rgba(1, 1, 1, 0.5);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  /* just extra visual effect */
  transition: box-shadow 300ms, transform 300ms;
  z-index: 1;
}

<div class="singleArticle">
  <div class="cover"></div>
</div>
<div class="singleArticle">
  <div class="cover"></div>
</div>