css - 第 n 个子 CSS 选择

Question

我试图弄清楚如何使用nth一组对象中每 3 个元素中的一个来选择一个。

如果我的标记结构如下：

<div class="all-items">
  <div class="block">
    <a href="the-link">
      <div class="image-list">
        <div class="drop-shadow curved curved-hz-1">
          <img src="an-image.png" />
        </div>
      </div>
    </a>
  </div>

  <!-- then this repeats to show all the images -->
  <div class="block">
    <a href="the-link">
      <div class="image-list">
        <div class="drop-shadow curved curved-hz-1">
          <img src="an-image.png" />
        </div>
      </div>
    </a>
  </div>

  <!-- ... etc. -->

</div> <!-- end div class "all-items" -->

如何img在里面的图像组中选择每 3 个<div class="all-items">？

Answer 1

div.block:nth-child(3n) img { /*your css here*/ }

您正在选择 3 个 div 块，然后是其中的图像。

Answer 2

这将选择每三分之一.block的图像：

.block:nth-child(3n) img {
    /* styles */
}

演示：http: //jsfiddle.net/sC8Ne/