-3

我需要将样式应用于“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但这似乎不起作用。Last or of classfose_edit_row被样式化。这样做的正确方法是什么？甚至有可能吗？

4

2 回答 2

2

W3C:last-child

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

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

一个可能的 jQuery 解决方案：

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

演示

于 2013-06-30T14:28:38.943 回答
1

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

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

JS 小提琴演示。

与 CSS 相结合，应用特定样式以便它们可在其他地方重用，而无需操纵style特定节点/元素的属性。

于 2013-06-30T14:36:07.213 回答