CSSネストされていないので、私はそれをしたい！

Question

まあ、我々はいくつかのためのCSSを得た私は、この

<table class="infoBox"> 
    <tr> 
     <td> 
      test 
     </td> 
     <td> 
      <table> 
       <tr> 
        <td> 
         this should not be bold! 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

とを持って言うことができます。この

Table.infoBox trのtdの{ フォント重量：太字; }

今私の問題は、ネストされたテーブルは、私が唯一のネストした表は、CSSによって影響を受けないように、私は方法でそれを定義しますどのようにこのCSSを取得するために、外側のテーブルをしたいときにも、CSSを得るように見えるということです？

Answer 1

これは直属の子で行うことができますが、これはすべてのブラウザでサポートされているわけではありません。試してみてください：

table.infoBox tr td { font-weight: bold; } 

table.infoBox table tr td { font-weight: normal; } 

すべてのセレクタtable.infoBox tr tdがあると言うこと：

は、インフォボックスのクラスを使用して任意のテーブルの子である任意の<tr>タグの子である任意の<td>タグにこのスタイルを適用します。

したがって、infoBoxクラスのテーブル内のテーブルに対して実行したいことを宣言するには、このスタイルブロックの下でより具体的にする必要があります。 （IE6でサポートされていない）

table.infoBox > tbody > tr > td { font-weight: bold; } 

注：神秘TBODY要素

Answer 2

いずれ子セレクタを使用します。これは、テーブルに3つのセクションがあるためです：thead, tbody and tfoot。これらのテーブルがない場合、行がtbody要素に追加されます。

または組み合わせ：

table.infoBox tr td { font-weight: bold; } 
table.infoBox tr td td { font-weight: normal; } 

はこの1つの多くの潜在的なバリエーションがあります。

Answer 3

Table.infoBoxテーブルtr td {font-weight：normal; }

Answer 4

また、使用することが十分可能性があります

table.infoBox { font-weight: bold; } 
table.infoBox table { font-weight: normal; } 

または

table.infoBox tr { font-weight: bold; } 
table.infoBox table tr { font-weight: normal; } 

すべてのCSSがあなたのCSSを通じて他のfont-weightルールにもよるが、それはCSSのdeclerationsをベースとしていることに注意することは便利です親子関係の直接船ではなく、子どものためにそのため、table{}は、定義されたコンテンツに強く近いものがない限り、td{}と同じ内容のコンテンツになります。