替代解决方案

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，其中：

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

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

替代解决方案

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

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

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

...现在它已经在HTML5中一脉相承，所以为了使浏览器符合要求，它基本上必须采用这种方式。

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

1 个答案:

替代解决方案