1

2行目、1列目に別のテーブルが含まれているテーブルがあります。親テーブルの行に背景色を設定したいのですが、子テーブルの行には適用しないでください。そのためにCSSチャイルドセレクター（>）を使おうとしていますが、機能していません...理由を教えてもらえますか？

これが私のコードです：

<!DOCTYPE HTML PUBLIC>
<html>
 <head>
   <style>
   table.tab > tr{
     background:red;
   }
  </style>
 </head>

 <body>
  <table class="tab">
   <tr>
    <td>asdf</td><td>afda</td><td>asdfdsa</td>
   </tr>

   <tr>
    <td colspan="3">
      <table>
       <tr>
          <td>afds</td><td>Trkaladf</td><td>inner Tab</td>
       </tr>
      </table>
    </td>
   </tr>

  </table>
 </body>
</html>
4

3 に答える 3

7

一部のブラウザは、間にtbodyネストされた要素を自動レンダリングすることを好みます。これにより、直接子セレクタが機能しなくなります。tabletr

table.tab > tbody > tr, table.tab > tr{
     background:red;
   }​

http://jsfiddle.net/vppXL/

ただし、このコンテンツが表形式のデータではなくレイアウト用である場合は、テーブル要素を使用しないでください。

于 2012-08-16T11:19:43.817 に答える
2

<thead>次のように、自分と<tbody>セクションを自分で設定するのが最善の方法です。

<table class="tab">
    <thead>
        <tr>
            <td>asdf</td>
            <td>afda</td>
            <td>asdfdsa</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="3">
                <table>
                    <tr>
                        <td>afds</td>
                        <td>Trkaladf</td>
                        <td>inner Tab</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>​

次に、tbodyの行をターゲットにするようにマークアップを設定することを選択できますが、theadは選択できません。

table.tab tbody {
    background: red;
}​

ただし、代わりに次の要素を使用して要素を設定することbackground-colorをお勧めします。<td>

table.tab > tbody > tr > td {
    background: red;
}​

ここにjsFiddleの例があります。

于 2012-08-16T11:24:12.177 に答える
1

table.tab > tbody > tr確かに最初の行だけにスタイルを与えます。Firebugを使用したDOMを見ると、確認できます。子テーブルの最初の行は、同じようにスタイル設定されません。

ただし、子テーブルは背景が赤のテーブル行内にあり、子テーブルには背景が指定されていないため、子テーブルには背景がありません。したがって、子テーブルの「全体」に赤い背景が表示されます。

考えられる解決策-子テーブルも異なる背景でスタイリングします。

table.tab > tbody >  tr {
 background:red;
}

table.tab table > tbody > tr{
 background:white;
}
于 2012-08-16T11:33:03.817 に答える