最初のテーブル行にCSSを作成し、他のものを代入

Question

レイアウトを変更できない別のアプリケーション/サービスから生成されたテーブルがあります。最初の行にスタイルがあり、次に他の行にスタイルが交互に表示されるCSSを使用したいと思います。主な問題は、ヘッダーやその他の行に関するhtmlに違いがないことです。

<table id="t01"> 
    <tr> 
    <td>Firstname</th> 
    <td>Lastname</th> 
    <td>Age</th> 
    </tr> 
    <tr> 
    <td>Jill</td> 
    <td>Smith</td> 
    <td>50</td> 
    </tr> 
    <tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
    </tr> 
    <tr> 
    <td>John</td> 
    <td>Doe</td> 
    <td>80</td> 
    </tr> 
</table> 

私はtable > tr:n-child(odd)のようにCSSで物事を見てきましたが、それらは動作しません。 「tr：nth-​​child（ODD EXCEPT WHEN = 1）」と言ってもいいですか？

ご協力いただきまして誠にありがとうございます。ここに私が達成しようとしているもののスナップショットがあります。

EDIT：SOLUTION

これは私が落ち着い溶液でした。キーはnth-child(2n + 1)セレクタの後にfirst-childセレクタを配置して、ヘッダスタイルが反復スタイルをオーバーライドするようにしました。私は:notセレクターを調べるかもしれませんが、私は再び転がりたいと思っていました。

div#tablewrappingdiv> table > tbody tr:nth-child(2n+1) > td{ 
    background-color: #eee; 
} 
div#tablewrappingdiv> table > tbody > tr:first-child > td{ 
    background-color: #006c00; 
}   
div#tablewrappingdiv> table > tbody > tr:nth-child(2n + 2) > td{ 
    background-color: #d8e4bc; 
} 

Answer 1

Selector Reference for nth-childを見てみましょう：

tr:first-child  {darkgreen} (nth-child(0) would also work) 
tr:nth-child(2n+2) {white} 
tr:nth-child(2n+3) {lightgreen} 

式（AN + B）を使用。説明：aはサイクルサイズを表し、nは カウンタ（0から始まります）、bはオフセット値です。

がここにアクションでそれを参照してください：https://jsfiddle.net/z8xhs0h1/

---

このかなり単純なケース（偶数/奇数、異なる第1）の場合は、this answerを見てみましょう。読みやや簡単で、あなただけの最後first-childルールを置く必要があることを述べている：

tr:nth-child(even) {white} 
tr:nth-child(odd) {lightgreen} 
tr:first-child  {darkgreen} (overrides white color) 

それでも、より複雑な場合のために、またはあなたが非常に明示的になりたい場合には、an+bルールは非常に柔軟であることができます。

Answer 2

また、このようなものを使用することもできます。

• 我々はnth-child(even/odd)セレクタを使用して、代わりに偶数と奇数行を必要とすることは、ここではかなり適切です。

• そして、我々はexclude the first row（奇数ある）にしたいので、あなただけの:not(:first-child) selector with the odd attributeを使用することができます。

#t01 tr:first-child{ 
 
background:yellow; 
 
} 
 
#t01 tr:nth-child(even){ 
 
background:red; 
 
} 
 
#t01 tr:nth-child(odd):not(:first-child){ 
 
background:green; 
 
}

<table id="t01"> 
 
    <tr> 
 
    <td>Firstname</td> 
 
    <td>Lastname</td> 
 
    <td>Age</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>John</td> 
 
    <td>Doe</td> 
 
    <td>80</td> 
 
    </tr> 
 
</table>

Answer 3

下図のようにして、 "第三のいずれかから出発し毎秒子" を意味ここで、 "n番目の子（2N + 3）"、tr:first-child、tr:nth-child(2n+2)とtr:nth-child(2n+3)を使用することができ：

tr:first-child { 
 
    background: #fa0; 
 
} 
 

 
tr:nth-child(2n+2) { 
 
    background: #a0f; 
 
} 
 

 
tr:nth-child(2n+3) { 
 
    background: #0eb; 
 
}

<table id="t01"> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    <th>Age</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>John</td> 
 
    <td>Doe</td> 
 
    <td>80</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>John</td> 
 
    <td>Doe</td> 
 
    <td>80</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>John</td> 
 
    <td>Doe</td> 
 
    <td>80</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>John</td> 
 
    <td>Doe</td> 
 
    <td>80</td> 
 
    </tr> 
 
</table>