css - 使用 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; }

请注意，有多个 <thead> 是无效的 html或 <tfoot>单个表中的部分，因此您可能希望嵌套表来分隔您的部分。

有一篇关于 CSS3 伪选择器的优秀文章 here .

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