10

私は CSS があまり得意ではないので、助けが必要です。

1行おきに灰色にし、交互の行を白にしたいテーブルがあります。しかし、私はそれが特定の1つのテーブルでのみ発生することを望んでいます。

CSS にいくつかのコードを追加しました。 

tr:nth-child(even) {  
background: #CCC;  
}  

tr:nth-child(odd) {  
background: #FFF;  
}

しかし問題は、サイトのすべてのテーブルに影響を与えることです。特定のクラスにのみ適用される例は見つかりませんでした。それは可能ですか？私はそれを以下にのみ適用したい:

table.dashboardtable
4

3 に答える 3

11

いつものように CSS 子孫コンビネータ (並置) を使用します。

table.dashboardtable tr:nth-child(even)
table.dashboardtable tr:nth-child(odd)
于 2009-10-15T01:09:59.530 に答える
2

これが理にかなっていることを願っています。

<!DOCTYPE html>

<html>
  <head>
    <style type="text/css">
      #customers tr:nth-child(even){
        background-color:white;
      }
      #customers tr:nth-child(odd){
        background-color:Lavender;
      }
    </style>
  </head>

  <body>
    <p>In your markup define your table:</p>
      <table id="customers"></table>
  </body>
</html>
于 2012-05-16T22:22:14.553 に答える
2

nth-childとのような式をnth-of-type受け入れます。ここで、とは定数です。oddevenan+bab

通常はnth-of-type、指定したタイプにのみ適用される を使用します。それは他の要素を除外します。偶数のすべての tr にその背景色を持たせたい場合は、次を試してください。

tr:nth-of-type(2n){
  background: #CCC;
}

tr:nth-of-type(2n+1){
  background: #FFF;
}

CSS セレクターの詳細

于 2009-10-15T01:12:22.440 に答える