1

CSSで次の行をターゲットにしたい：

<tr class="r0"> *this one*
<tr class="r0">
<tr class="r1"> *this one*
<tr class="r1">
<tr class="r0"> *this one*
<tr class="r0">
<tr class="r1"> *this one*
<tr class="r1">
<tr class="r0"> *this one*
<tr class="r0">
<tr class="r1"> *this one*
<tr class="r1">

ありがとう！

編集：

すみません、ここに重要な部分を追加するのを忘れていました!

時々、私のテーブルは次のようになります。

<tr class="r0">
<tr class="r1">
<tr class="r0">
<tr class="r1">
<tr class="r0">
<tr class="r1">

その場合、何もターゲットにする必要はありません。したがって、最初のコード例のように見える場合にのみ、それをターゲットにする必要があります。さらに、これら 2 つの例はまったく同じクラスと ID を持っているため、どちらが表示されているかはわかりません。

ありがとう！

編集：

これはほとんどうまくいくようです

tr.r0 + tr.r0 {
    background-color:red;
}

tr.r1 + tr.r1 {
    background-color:red;
}

http://jsfiddle.net/2BVRF/2/多分私はそれを少しいじることができます。次の要素ではなく、前の要素を選択するために必要です:/

4

6 に答える 6

1

2 番目の行は照合できますが、最初の行は照合できません。

.r0 + .r0,
.r1 + .r1{
    background-color: lightgray;
}

ここに画像の説明を入力

このようなことを行うことで、反対を一致させることができます。

.r0 + .r0 + .r1,
.r1 + .r1 + .r0{
    background-color: lightgreen;
}

ここに画像の説明を入力

しかし、最初の要素には一致しないことがわかります。CSS は後方に一致することができないため、DOM ツリーの前方または下方に一致するだけです。

http://jsfiddle.net/62F4N/

ただし、javascript http://jsfiddle.net/62F4N/2/ができれば制限はありません。

var els=document.querySelectorAll('tr.r0,tr.r1');

for(var i=0; i<els.length; i++){
    var el = els[i];

    if(el.nextElementSibling && el.className==el.nextElementSibling.className){
        el.style.backgroundColor = "lightgreen";
    }
}

ここに画像の説明を入力

于 2013-09-11T03:40:19.870 に答える
1

:nth-child セレクターでこれを行うことができます。

table tr:nth-child(odd) td { background-color: #ccc; }

これが実際の例です: http://jsfiddle.net/2BVRF/

[編集 #2: クラスレス]

うーん、申し訳ありませんが、CSS で前の要素を選択する方法はありません。クラスを同じままにする必要がある場合は、このタスクを実行するために JS が必要になります。

この例では、前の要素を選択するために jQuery を使用しています。

http://jsfiddle.net/2BVRF/3/

[編集: OP の新しい条件]

残念ながら、2 つのテーブルのいずれかをターゲットにする必要がある場合、この方法はあまり役に立ちません。

テーブルにクラスを割り当てて、奇数行をターゲットにすることをお勧めします。これにより、ターゲットにしたくないテーブルがそのまま残ります。

更新された作業例: http://jsfiddle.net/2BVRF/1/

于 2013-09-11T01:54:36.000 に答える
1 
tr:nth-child (odd){
    /* Your style */
}
于 2013-09-11T01:49:56.383 に答える
0

純粋なcssで処理する2番目のケースのアイデアはありませんが、first caseこのように使用できます

tr.r0:nth-child(odd){
    background-color: red;
}
tr.r1:nth-child(odd){
    background-color: red;
}

デモ

于 2013-09-11T03:18:41.490 に答える
0

jsfiddle で次のコードを試しました。それは正常に動作します。

.special tr.r0:nth-child(odd) {
    background-color:red;
}

.special tr.r1:nth-child(odd) {
    background-color:red;
}
于 2013-09-11T03:13:04.230 に答える
0

http://www.w3schools.com/cssref/sel_nth-child.aspによると、これを行う必要があります。

tr:nth-child(2) {
  /* CSS goes here */
}

詳細については、 http://www.w3schools.com/cssref/css_selectors.aspを参照してください。

于 2013-09-11T01:55:27.010 に答える