CSS选择器从主表的最后一行

Question

我在表格中有一个表格,我想填写表格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的最后几行着色.

Answer 1

你的表应该只是直接的子项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中一脉相承,所以为了使浏览器符合要求,它基本上必须采用这种方式.