html - 各セルに一意の ID を与えずに、特定のテーブルのすべてのセルの CSS を調整しますか?

Question

特定の子 ID ではなく、テーブルの ID に基づいて 1 つのテーブルのセルの CSS プロパティを変更する方法はありますか?

1 つのテーブルの外観 (たとえば、各セルに色付きの境界線を付ける) をある方法で変更し、別のテーブルを別の方法で変更したいのですが、各セルに ID を指定することは避けたいと思います。

明確にするために、テーブル内の各セルに個別にアクセスする必要はありません。さまざまなテーブルの「子」セルのすべてのプロパティを設定したいだけです。

Answer 1

特定のテーブルを特定できれば問題ありません。子孫セレクターを使用するだけです。

#tableid1 td { border: 2px solid green; }

これは、ID が tableid1 のテーブルの子孫であるすべてのテーブル セルに緑色の境界線があることを示しています。<th>セルも含めるには:

#tableid1 td, #tableid1 th { border: 2px solid green; }

注:ネストされたテーブルがある場合、たとえば、外側のテーブルには境界線を付けたいが、内側のテーブルには付けたくない場合、上記は問題になる可能性があります。通常、ネストされたテーブルを使用することはお勧めしませんが、他に選択肢がない場合もあります。この種の問題に対処するには、複数の方法があります。

まず、代わりに子セレクターを使用できます ( >):

#id1 > tbody > td { ... }

要素はここ<tbody>では暗黙的です。

問題は、子セレクターが IE6 でサポートされていないことです。

これに対処する別の方法は、効果をキャンセルすることです。

#id1 td { border: 2px solid green; }
#id1 td td { border: 0 none; }

これは必ずしも実用的ではありませんが、IE6 では機能します。