CSS选择器求助：如何将RED类结合到#tData td:nth-child(8)选中最后元素

嘿，我来帮你搞定这个CSS选择器的问题！

首先得明确你的需求：你要选中的是「#tData容器下，属于第8列（每个<tr>里的第8个<td>）且带有RED类的元素中的最后一个」对吧？分两种情况给你解决方案：

情况1：最后一个符合条件的元素在最后一行 #

如果带有RED类的第8列<td>刚好在表格的最后一行，那直接用这个选择器就行：

#tData tr:last-child td:nth-child(8).RED

它会精准选中最后一行的第8个<td>，并且只在这个<td>带有RED类时生效。

情况2：最后一个符合条件的元素不在最后一行 #

可惜的是，CSS目前没有原生的「匹配某个选择器的最后一个元素」的伪类（比如还在提案阶段的:last-match就做这个，但现在没法用）。这种情况下，你得借助JavaScript来实现：

// 先获取所有符合条件的元素
const redTds = document.querySelectorAll('#tData td:nth-child(8).RED');
// 取数组里的最后一个元素
const lastRedTd = redTds[redTds.length - 1];

// 拿到元素后就可以操作了，比如给它加样式
if (lastRedTd) {
  lastRedTd.style.color = '#fff';
  lastRedTd.style.backgroundColor = '#c0392b';
}

另外，如果你只是想选中所有既是第8列又带有RED类的<td>（不用管是不是最后一个），那直接把类名追加到原选择器后面就好：

#tData td:nth-child(8).RED

这个选择器会匹配所有满足条件的<td>。

内容的提问来源于stack exchange，提问作者Dewinky