css - CSS3: 特定のクラスの tr の後でテーブルの行の代替色をリセットする

Question

これが私のフィドルです。

http://jsfiddle.net/cnLDF/

.content各行の後のすべての.heading行をグレーで開始したい、この場合は「コンテンツ 5」です。

CSSのみを変更する方法を教えてください。

Answer 1

adjacent sibling selector（デモ目的で赤い色を使用しました）の使用：

table tr.heading + tr.content {
    background: #f00;
}

ただし、が勝つことに注意してください。そうすると、最初の、の前にある、つまり（ではなく）nth-child(even)だけに色が付けられます。.content.headeroddeven

デモ： http： //jsfiddle.net/cnLDF/1/

---

編集：

私は少し試しましたが、純粋なCSSでは不可能だと思います（しかし、間違っていることが証明されてうれしいです）：疑似要素は常にtrテーブル内のすべての要素（oddとeven）を参照し、最後の宣言は前の宣言をオーバーライドします...CSSのみのimhoでの唯一の方法は、adjacent selectorすべての見出しの後にすべてのケースに対して静的宣言を作成することです。これは、すべての見出しに少数の既知の固定数のコンテンツがある場合にのみ実行できます（たとえば、5、または10 ...）、次のようになります。

table tr.heading + tr.content > td {/* stuff */ }  
table tr.heading + tr.content + tr.content > td {/* stuff */ }  
table tr.heading + tr.content + tr.content + tr.content > td {/* stuff */ }  
/* and so on... */

代わりに入力を処理できる場合は、出力サーバーサイドを簡単に計算し、"odd"と"even" classesをtrsに適用し、それに応じて色を付けることができます。