Question

我正在网站上工作并遇到了问题。我有几个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：）

提前致谢。

Answer 1

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

任何第n个：非兄弟元素的等价物？

1 个答案: