javascript - CSSを使用して動的にテーブル内の代替行のbgcolor

Question

CSSを使用してテーブル内の代替行に2つの異なるbgcolorを動的に与える方法。

この問題を解決するためにjQueryを使用したくありません。

Answer 1

：nth-​​child（）疑似クラスを使用する

tr:nth-child(odd){
    background-color:green
}
tr:nth-child(even){
    background-color:yellow
}​

デモ

これがセレクターの例です。

Answer 2

デモ

疑似クラスを使用する:nth-of-type(n)

このように

tr:nth-of-type(2n){
    background-color:green
}
tr:nth-of-type(2n-1){
    background-color:yellow
}

デモ

詳細 はこちらをクリック

Answer 3

CSS3nth-childセレクターを使用できます。

tr:nth-child(odd)

HTMLテーブルの奇数行を表します。