使用CSS 3选择器

Question

<table> 
    <tr> 
     <td>foo bar foo bar foo bar</td> 
    </tr> 
    <tr> 
     <td>foo bar foo bar foo bar</td> 
    </tr> 
    <tr> 
     <td>select me</td> 
    </tr> 
    <tr> 
     <th>c1</th> 
    </tr> 
    <tr> 
     <td>foo bar foo bar foo bar</td> 
    </tr> 
    <tr> 
     <td>foo bar foo bar foo bar</td> 
    </tr> 
    <tr> 
     <td>select me</td> 
    </tr> 
    <tr> 
     <th>c1</th> 
    </tr> 
</table> 

<style> 
    table { background: lightblue; width: 100%; border: 1px solid green } 
    th { text-align: left; background: #fff } 
</style> 

选择表格行之前是否有可能选择“选择我”的表格行与CSS 3以某种方式...？

Answer 1

我不相信这是可能的CSS与您当前的布局。尽管问题变得更容易，但稍微调整一下标记即可。一般来说，如果你想用CSS做一些特别困难的事情，这是你的标记可能不够描述的线索。

考虑，例如，如果你使用一个脚注行：

<table> 
    <tbody> 
     <tr><td>foo bar foo bar foo bar</td></tr> 
     <tr><td>foo bar foo bar foo bar</td></tr> 
     <tr><td>select me</td></tr> 
    </tbody> 
    <tfoot> 
     <tr><td>c1</th></td> 
    </tfoot>  
</table> 

这将使你的标签的风格更多的语义，你可以使用last-child CSS3选择器：

tbody tr:last-child { color: Lime; }

请注意，它是不是有效的HTML在一个表中有多个<thead>或<tfoot>部分，所以你可能会想嵌套表分开你的部分。

在CSS3伪选择器here有一个很好的artice。

请注意，尽管旧版本的IE可能不支持所有的伪选择器。