html - nth-child在css中使用旋转不起作用

Question

我正在尝试使某些图像看起来像宝丽来照片。我希望通过使用:nth-child属性使旋转看起来随机，但是到目前为止，它根本没有起作用。有任何想法吗？

这是HTML：

<div class="polaroid">
    <a href="#building" title="Building"><img src="building.jpg"></a>
    <a href="#car" title="Car"><img src="car.jpg"></a>
    <a href="#building" title="Building"><img src="okay.jpg"></a>
    <a href="#sky" title="Sunset over a City"><img src="sky.jpg"></a>
    <a href="#street" title="Street in Tokyo"><img src="street.jpg"></a>
    <a href="#sunset" title="Sunset on the Beach"><img src="sunset.jpg">
    <a href="#tiger" title="Tiger"><img src="tiger.jpg"></a>
    <a href="#tree" title="Palm Trees"><img src="trees.jpg"></a>
    <a href="#turtle" title="Turtle"><img src="turtle.jpg"></a>
    <a href="#water" title="Waterfall"><img src="water.jpg"></a>
</div>

这是我一直试图用来旋转每个第三张图片的CSS。我正在使用Chrome。

.polaroid:nth-child(3n) a {
    -webkit-transform: rotate(-8deg); 
}

Answer 1

:nth-child不适用于该类，仅适用于该元素，加上您要适用于父级，当您需要适用于子级a时，请将img设置为rotate

a:nth-child(3n) img {
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  transform: rotate(-8deg);
  border: red solid
}
img {
  border: yellow solid
}

<div class="polaroid">
  <a href="#building" title="Building">
    <img src="//lorempixel.com/100/100">
  </a>
  <a href="#car" title="Car">
    <img src="//lorempixel.com/100/100">
  </a>
  <a href="#building" title="Building">
    <img src="//lorempixel.com/100/100">
  </a>
  <a href="#sky" title="Sunset over a City">
    <img src="//lorempixel.com/100/100">
  </a>
  <a href="#street" title="Street in Tokyo">
    <img src="//lorempixel.com/100/100">
  </a>
  <a href="#sunset" title="Sunset on the Beach">
    <img src="//lorempixel.com/100/100">
    <a href="#tiger" title="Tiger">
      <img src="//lorempixel.com/100/100">
    </a>
    <a href="#tree" title="Palm Trees">
      <img src="//lorempixel.com/100/100">
    </a>
    <a href="#turtle" title="Turtle">
      <img src="//lorempixel.com/100/100">
    </a>
    <a href="#water" title="Waterfall">
      <img src="//lorempixel.com/100/100">
    </a>
</div>