html - 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; }

查看实际效果 here .这利用了 child selector ，其中:

...separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first.

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

替代方案

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

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

* 这不是强制性的，但大多数(所有？)浏览器都会添加这些内容，所以最好明确说明。正如@BoltClock 在评论中所说:

...it's now set in stone in HTML5, so for a browser to be compliant it basically must behave this way.