12

html構造を変更せずに見つけたものよりも良い解決策があるかどうか疑問に思いました

HTML構造は次のようになります

<div class="wrap">
  <div class="divider"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="divider"></div>
</div>

したがって、同じレベルにさまざまな DIV があります。私がやりたいのは、分割線が表示されるまで 4 ブロックごとに異なる色を付けることです。その後、再カウントする必要があります。

のようなものがうまくいくと思って.block:nth-child(4n)いましたが、実際には、クラスではなく親に基づいて要素をカウントします。

試してみる JSFiddle は次のとおりです。各行のブロック #4 と #8 は異なる色にする必要があります http://jsfiddle.net/SKgdH/3/

そして、これは私がそれを一種の仕事にした方法です: http://jsfiddle.net/SKgdH/1/

私がしたことは、このような.dividerの4番目の兄弟を探すことでした.divider + .block + .block + .block + .block

それは機能しますが、8、12、16、.. ブロックにも同じことを書かなければならず、もはや自動にはなりません。

またはのようなものはあります.divider + .block:nth-sibling(4)か.divider + .block:nth-of-class(4)？

ソースコードを変更したり、JavaScript を使用したりせずに、これを解決する方法を知っている人がいるかもしれません。

4

3 に答える 3

12

このような疑似クラスは、異なる複合セレクターに関連する要素と一致することを期待しているため、機能しません。これは、単純なセレクターのしくみではありません。たとえば、その疑似クラスを持つ複合セレクターが 1 つしかない (兄弟コンビネーターがない) 複雑なセレクターを作成した場合:

.block:nth-sibling(4n)

これが と一致すると予想するか.block:nth-child(4n)、まったく一致しないと予想するか、それとも無効であると予想しますか?

何とか要約して繰り返すことができればいいのです+ .block + .block + .block + .blockが、残念ながら、セレクターの構文がどのように設計されているかにより、それは不可能です。

代わりに、JavaScript を使用するか、適切な要素に追加のクラスを追加する必要があります。

于 2013-04-03T14:34:01.833 に答える