2

偶数行と奇数行のみをターゲットにしたいテーブルがいくつかあります。

<table class="record">
<tbody>
  <tr>
    <th scope="col">Score</th>
    <th scope="col">Time</th>
  </tr>
  <tr>
    <td>A</td>
    <td>1.20</td>
  </tr>
  <tr>
    <td>B</td>
    <td>1.35</td>
  </tr>
  <tr>
    <td>C</td>
    <td>1.39</td>
  </tr>
  </tbody>
</table>

オンラインで見つけた次のコードを使用しようとしましたが、機能しますが、サイト周辺のすべてのテーブルで機能します。

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

「レコード」のクラスのみを使用してテーブルをターゲットにするにはどうすればよいですか？ご提案ありがとうございます。

編集：そして、このテーブルがtdとして別のテーブルの下にある場合はどうなりますか？:)

4

2 に答える 2

7

まず最初に：質問のタイトルは、を使用することを暗示していますidが、質問コードではclass、関連するtable要素を選択するためにを使用しています。これらは同等ではありません。要素には1つだけのクラスがありidますが、複数のクラスがあります。とはいえ、クラスを使用するには、投稿された回答でカバーできます。

一方、id（タイトルに記載されているように）を使用する場合は、に置き換え.recordます#idOfTable（HTMLにを渡すことを忘れないでidください:) <table id="idOfTable"><!-- other stuff --></table>。

idもちろん、classセレクターと組み合わせることができます。

セレクターの一部として祖先を渡すだけです。

.record tr:nth-child(even) {background: #666;}
.record tr:nth-child(odd) {background: #CCC;}

JSフィドルデモ。

これを内でのみ機能させたいという理由tbodyで、セレクターの一部として渡すこともできます。

.record tbody tr:nth-child(even) {background: #666;}
.record tbody tr:nth-child(odd) {background: #CCC;}

JSフィドルデモ。

idもちろん、classセレクターと組み合わせることができます。

#idOfTable.classNameOfTable {
    /* CSS */
}
于 2012-09-30T14:25:27.570 に答える
3

table.record投稿したCSSコードの前に次のように追加するだけです。

table.record tr:nth-child(even) { background: #666; }
table.record tr:nth-child(odd)  { background: #CCC; }

クラスには他の要素が存在する可能性があり、それらを妨害しないため、これtableをテーブルのみに区切ることが重要です。record

は.recordクラスを指定するだけです（<elem>.<class>構文であり、必須で<elem>はありません）。

また、ネストも簡単に理解できます。外側の要素内で一致する要素を探します。関連するW3Sドキュメントは次のとおりです。

于 2012-09-30T14:26:27.310 に答える