Question

我有一个表，其第二行，第一列包含另一个表。我想为父表行设置背景颜色，但不应该应用于子表行。为此，我正在尝试使用CSS Child-selector（＆gt;）。但它不起作用......任何人都可以告诉我原因。

这是我的代码：

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

Answer 1

我认为某些浏览器喜欢自动呈现嵌套在tbody和table之间的tr元素，这会导致直接子选择器无效。

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

http://jsfiddle.net/vppXL/

但是，如果此内容用于布局和非表格数据，则应not be using a table element。

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

然后，您可以选择将标记设置为目标行，但不是thead：

table.tab tbody {
    background: red;
}

但是，最好在background-color元素上设置<td>，而不是：

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

有jsFiddle example here。

Answer 3

table.tab > tbody > tr确实只将样式赋予第一行。如果您使用firebug查看DOM，您可以确认它。子表的第一行没有相同的样式。

但是，由于您的子表位于具有红色背景的表行内，并且子表没有指定背景，因此子表将没有背景 - 因此您仍然可以看到红色背景“通过”子表。

可能的解决方案 - 使用不同的背景设置子表的样式：

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

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

CSS选择器＆gt;不管用

3 个答案: