表格中某类的最后一个tr的最后一个td的样式

Question

我需要将样式应用到类“fose_table_row”的最后一行的最后一个单元格。 表是下一个

<table class="fose_table">
    <tr>
        <th>1</th>
        <th>2</th>
    </tr>
    <tr class="fose_table_row">
        <td>3</td>
        <td>4</td>
    </tr>
    <tr class="fose_edit_row">
        <td colspan="4">56</td>
    </tr>
    <tr class="fose_table_row">
        <td>7</td>
        <td>8</td>
    </tr>
    <tr class="fose_edit_row">
        <td colspan="4">90</td>
    </tr>
</table>

类fose_edit_row的行不是可见的行，因此我需要对fose_table_row的最后一行进行样式设置。 我尝试了.fose_table .fose_table_row:last-child td:last-child和.fose_table tr.fose_table_row:last-child td:last-child，但这似乎不起作用。上一个或类fose_edit_row的样式。什么是正确的方法呢？它甚至可能吗？

Answer 1

W3C :last-child

  

：last-child伪类表示一个元素，它是某个其他元素的最后一个子元素。

:last-child将获取其父级的最后一个元素，然后如果它具有类.fose_table_row，则将应用样式。所以CSS无法解决你的问题。

可能的jQuery解决方案：

$('table.fose_table').find('tr.fose_table_row').eq(-1).addClass('extra-style');

DEMO

Answer 2

目前解决问题的唯一方法（正如我在评论中所述）是使用JavaScript。使用纯JavaScript而不是库，我建议：

var foseTableRows = document.querySelectorAll('.fose_table_row'),
    last = foseTableRows[foseTableRows.length - 1];
console.log(last);
last.classList.add('lastFoseTableRow');

JS Fiddle demo

与CSS结合使用，以应用特定样式，以便在不操纵特定节点/元素的style属性的情况下可以在其他地方重复使用。