1

itemクラスの偶数行が奇数行とは異なる色の色付きのテーブルを作成しようとしています。フィドルを参照してください: http://jsfiddle.net/x7XT5/

HTML:

<table>
  <tr class="item">
      <td>1</td>
  </tr>
<tr>
    <td>info</td>
</tr>
  <tr class="item">
      <td>2</td>
  </tr>
<tr>
    <td>info</td>
</tr>
  <tr class="item">
      <td>3</td>
  </tr>
<tr>
    <td>info</td>
</tr>
  <tr class="item">
      <td>4</td>
  </tr>
<tr>
    <td>info</td>
</tr>
</table>
​

CSS:

table tr.item:nth-child(2n)
{
    background-color: yellow;
}

table tr.item:nth-child(2n+1)
{
    background-color: red;
}

cssで動作させるには？

UPD1

<tr>クラスなしitemは白い背景でなければなりません。
<tr class="item">'背景は、偶数/奇数の位置で赤/黄色でなければなりません。</p>

4

4 に答える 4

2 
table tr
{
    background-color: yellow;
}

table tr.item:nth-child(2n+1)
{
    background-color: red;
}

更新：どうぞ：

table tr {
    background-color: white;
}

table tr.item:nth-child(n)
{
    background-color: red;
}

table tr.item:nth-child(4n+1)
{
    background-color: yellow;
}
于 2012-05-28T11:32:40.613 に答える
0

クラスを削除してtr、cssファイルをチェックインしてください

簡単に作成できます

ライブデモhttp://jsfiddle.net/x7XT5/1/

と

2番目の方法はLive Demo http://jsfiddle.net/x7XT5/3/です

更新されたライブ デモ http://jsfiddle.net/x7XT5/5/

于 2012-05-28T11:32:01.290 に答える
0

これを試して。n 番目の子を設定する必要はありません。

http://jsfiddle.net/x7XT5/2/

また、odd & eeven キーワードを使用することもできます。

于 2012-05-28T11:33:55.123 に答える
0

まず、:nth-child の代わりに :nth-of-type を使用する必要があると思いますが、残念ながら、:nth-of-type はクラスでは機能しないため、純粋な CSS ソリューションを知りません。

いつでも使用できます：

table tr.item:nth-of-type(4n+3)
{
    background-color: yellow;
}

table tr.item:nth-of-type(4n+1)
{
    background-color: red;
}

この例では機能します。

于 2012-05-28T12:04:01.293 に答える