1

我有一个表，其第二行第一列包含另一个表。我想为父表行设置背景颜色，但不应将其应用于子表行。为此，我正在尝试使用 CSS Child-selector (>)。但它不起作用......谁能告诉我原因。

这是我的一段代码：

<!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

I think some browsers like to auto-render a tbody element nested between table and tr which will cause your direct-child selector to not work.

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

http://jsfiddle.net/vppXL/

However, if this content is for layout and not tabular data, you should not be using a table element.

于 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 回答