0

私はサイトで作業していて、問題に遭遇しました。同じ css クラスが適用された div がいくつかあります。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 に答える