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是專門為避免您這樣做而設計的，因此並不理想，但這確實為您提供了兼容性。