使用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可能不支持所有的僞選擇器。