html – CSS选择器最后一行从主表

我在桌子里面有一张桌子,我只想填写表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的最后一行。

你的桌子应该有直接的孩子只是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.

因此,您只针对ticon元素的直接子元素,它们本身就是#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.

http://stackoverflow.com/questions/16010791/css-selector-last-row-from-main-table

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:html – CSS选择器最后一行从主表