CSS：如何将样式应用于CSS类的最后一个（不是最后一个）

Question

我有以下HTML：

<tr>
    <td class="column-text">column 1</td>
    <td class="column-text">column 2</td>
    <td class="column-text">column 3</td>
    <td class="column-text">column 4</td>
    <td>last column has no class</td>
</tr>

请注意，“column-text”类的单元格数是动态的。

我有以下CSS：

tr td.column-text:last-child {
    color: red;
}

请注意，此选择器似乎无效。

上一个<td>的“CSS-column”类的右侧CSS选择器是什么？

谢谢和问候。

更新1

只是想分享一下这对我来说很困惑。以下是有效的！

tr td.column-text:first-child {
    color: red;
}

但正如帖子中所述，我希望将样式应用于给定类的最后一个单元格。

更新2

以下是我在实现没有基于帮助人们的输入的直接CSS解决方案后解决这个问题的方法。在生成动态html时，我在最后<td>添加了一个特殊类，其中包含“column-text”类。

感谢所有急于帮助的人们！

Answer 1

<强> HTML

<table>
<tr>
    <td class="column-text">column 1</td>
    <td class="column-text">column 2</td>
    <td class="column-text">column 3</td>
    <td class="column-text">column 4</td>
    <td class="column-text">column 5</td>
    <td class="column-text">column 6</td>
    <td class="column-text">column 7</td>
    <td class="column-text">column 8</td>
    <td class="column-text">column 9</td>
    <td>last column has no class</td>
</tr>
</table>

<强> CSS

tr td:nth-last-child(2){
   color:red;
}

预计在没有课程td的情况下，最后只有一个column-text兄弟。

Fiddle

Answer 2

我认为你不能用CSS做到这一点。如果你有兴趣，这是一个jQuery解决方案：

$('td.column-text').eq($('td.column-text').length-1).css({color:'red'});

Answer 3

last-of-type可能有效，但它不适用于类名。如果您不介意，可以使用：

$("td.column-text").last().css("color", "red");

JSFiddle

Answer 4

我认为你正在寻找类似这个例子的答案。 See here

Answer 5

这是一个CSS解决方案

td.column-text:nth-last-child(2) {color: red;}

Answer 6

正如这里所说，没有纯CSS解决方案。我所做的只是简单地将一个新类（＆＃34; last-column＆＃34;）添加到给定类的最后一个。如下所示：

<tr>
    <td class="column-text">column 1</td>
    <td class="column-text">column 2</td>
    <td class="column-text">column 3</td>
    <td class="column-text last-column">column 4</td>
    <td>last column has no class</td>
</tr>

上面的html是动态生成的，我能够知道哪一个是最后一个td＆＃34; column-text＆＃34;。我觉得这种方式比使用Javascript更好。

干杯。