Transform:scale 和 :nth-child() 选择器不起作用

Question

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

1.缩放变换 我的第一个问题是添加到 class .singleArticle 的缩放变换不起作用。这可能是因为与其他一些class冲突，但我找不到它。

.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 中都是不可见的。也找不到任何解决方案。

你能指出我哪里错了吗？可能最简单的方法就是看一下 codepen，因为将整个代码放在这里可能不是最好的主意。

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

Answer 1

对于第 2 点，nth-child(n) 选择器匹配作为其父元素的第 n 个子元素的每个元素，无论类型如何，因此 'n' 可以是数字、公式、关键字。可以参考 https://css-tricks.com/almanac/selectors/n/nth-child/ .

对于第3点，请去掉.singleArticle下的opacity: 0。

.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>

Transform:scale 和 :nth-child() 选择器不起作用

Transform:scale and :nth-child() selector don't work

html

css

jquery

codepen