38

我在一个表中有一个表，我只想填充表 1 的最后一行的背景，而不是表 2。

<style> 
#test tr:last-child
{
  background:#ff0000;
}
</style>

<table border="1" width="100%" id="test">
<tr>
 <td>
  <table border="1" width="100%">
   <tr>
    <td>table 2</td>
   </tr>
  </table>
 </td>
</tr> 

<tr><td>table 1</td></tr>
<tr><td>table 1</td></tr>
<tr><td>table 1</td></tr>

</table>

使用我的 CSS，我正在为 table1 和 table2 的最后一行着色。

4

1 回答 1

86

你的表应该有直接的子元素tbody和thead元素，行在 *. 因此，将 HTML 修改为：

<table border="1" width="100%" id="test">
  <tbody>
    <tr>
     <td>
      <table border="1" width="100%">
        <tbody>
          <tr>
            <td>table 2</td>
          </tr>
        </tbody>
      </table>
     </td>
    </tr> 
    <tr><td>table 1</td></tr>
    <tr><td>table 1</td></tr>
    <tr><td>table 1</td></tr>
  </tbody>
</table>

然后稍微修改你的选择器：

#test > tbody > tr:last-child { background:#ff0000; }

在这里查看它的实际应用。这利用了子选择器，它：

...分隔两个选择器并仅匹配与第二个选择器匹配的那些元素，这些元素是与第一个选择器匹配的元素的直接子元素。

因此，您只针对元素的直接子tbody元素，这些元素本身就是#test表的直接子元素。

替代解决方案

以上是最简洁的解决方案，因为您不需要覆盖任何样式。另一种方法是坚持您当前的设置，并覆盖内表的背景样式，如下所示：

#test tr:last-child { background:#ff0000; }
#test table tr:last-child { background:transparent; }

* 这不是强制性的，但大多数（所有？）浏览器都会添加这些，因此最好明确说明。正如@BoltClock 在评论中所说：

...它现在已经在 HTML5 中一成不变，因此要使浏览器兼容，它基本上必须以这种方式运行。

于 2013-04-15T08:35:40.977 回答