CSS：javascript中的最后一个选择器？

Question

我正在寻找选择每行中的最后一个td并立即使用此CSS选择器.table td:last-child但是它在IE中不起作用，所以有什么方法可以通过javascript（不包含任何框架）为IE选择吗？ 应用CSS样式。

Answer 1

var rows = document.getElementById('tester').rows;

for(var i = 0, len = rows.length; i < len; i++) {
    rows[ i ].lastChild.style.background = 'orange';
}

示例： http ： //jsfiddle.net/JsyYR/

---

编辑：如果您将在所有浏览器中运行它，这样做可能会更安全：

var rows = document.getElementById('tester').rows;

for(var i = 0, len = rows.length; i < len; i++) {
    rows[ i ].cells[ rows[ i ].cells.length - 1 ].style.background = 'orange';
}

示例： http ： //jsfiddle.net/JsyYR/2/

这是因为如果最后一个</td>与结束</tr>之间有空格，则某些浏览器会插入文本节点。 因此， lastChild将无法正常工作。

Answer 2

为此，您需要使用JavaScript：

var tableRows = document.getElementById('tableid').childNodes
var tableCells = tableRows[tableRows.length - 1].childNodes;
var lastCell = tableCells[tableCells.length - 1];

假设表的格式在这些标签之间没有任何内容。 没有肢体之类的。

或者，您可以简单地使用getElementByTagName('td')并获取返回数组的最后一个元素。 不利的一面是，它不适用于包含多个表的页面。

Answer 3

不管你是否应该辩论。 当然可以，因为Javascript框架可以做到这一点。

只是在JS库上添加少量依赖项时，是否应该花时间重新设计轮子，这是一个问题。

Answer 4

在Javascript中，您可以在任何DOM对象上引用.lastChild ，但是您必须首先获取元素，因此如果没有jQuery或类似的工具，这听起来并不容易。

显而易见的答案是“使用JQuery”。 您已经对此进行了指定（即“没有任何框架”），但这是迄今为止最明显的解决方案。

另一个解决方案是Dean Edwards的IE7.js （以及相关的IE8.js和IE9.js），它是一个Javascript脚本，试图修补IE的旧版本，使其与标准CSS等更加兼容。我相信它可以解决:last-child选择器。 但是，它又是一个第三方库，因此您可能不想使用它。

当然，您可以只向要应用最后一个子样式的元素添加一个附加类，然后在CSS中引用它而不是最后一个子样式。 考虑到last-child是专门为避免您这样做而设计的，因此并不理想，但这确实为您提供了兼容性。