0

我在一个网站上工作，遇到了一个问题。我有几个 div 应用了相同的 css 类。我想使用 css 变换每隔 3、5、8 等旋转一次，以呈现随机性。过去我用 nth-child 做过这个，但现在我的 div 不是直接的兄弟姐妹，而是从共同的父级嵌套了大约 5 个级别。

这是代码的简化（太长，无法全部添加）。

<tr>
  <td valign="top" width="20%">
    <form>
      <div class="box fp-product-listing">
        <div class="product-image">
          <a href="">
            <img class=" " />
          </a>
        </div>
        <div class="product-description">
          <a href="""></a>
          <div class="prices"> <- THIS IS THE DIV TO BE STYLED
          </div>
        </div>
      </div>
    </form>
  </td>
  <td valign="top" width="20%">
    <form>
      <div class="box fp-product-listing">
        <div class="product-image">
          <a href="">
            <img class=" " />
          </a>
        </div>
        <div class="product-description">
          <a href="""></a>
          <div class="prices"> <- THIS IS THE DIV TO BE STYLED
          </div>
        </div>
      </div>
    </form>
  </td>
</tr>

关于如何使用纯 CSS 做到这一点的任何建议？（不，我不会为了这个小效果而使用 jQuery :)

提前致谢。

4

1 回答 1

2

从您提供的 HTML 中，看起来每个div.prices都在其自己td的模式中。在这种情况下，您使用td:nth-child(...) div.pricesand not div.prices:nth-child(...)，因为这些td元素是彼此的兄弟。

于 2012-06-27T21:06:31.213 回答