css - 在 CSS 中组合 :last-child with :not(. 类)选择器

Question

是否可以选择最后一个没有职业属性的 child ？ 像这样:

<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
<tr class="table_vert_controls"> ... </tr>

在本例中，我想选择第三行。

我尝试了以下方法，但没有用:

tr:not(.table_vert_controls):last-child

提前致谢。

Answer 1

不单独使用 CSS 选择器，不，因为 :last-child 专门查看 last child，并且没有类似的 :last- of-class 伪类。请参阅我对 this related question 的回答。

截至 2015 年底，Selectors 4 对 :nth-child() 和 :nth-last-child() 的扩展的实现已经开始慢慢渗透，这允许您将任意选择器作为参数传递(更多信息也在对链接答案的更新中)。然后，您将能够编写以下内容:

tr:nth-last-child(1 of :not(.table_vert_controls))

虽然实现最近才开始出货，但至少还需要几年时间才能得到广泛支持(截至 2018 年 4 月，距第一个出货的浏览器 Safari remains the only browser to have done so 两年半)。与此同时，您将不得不使用其他东西，比如在相关类之前的额外类，或者 jQuery 选择器:

$('tr:not(.table_vert_controls):last')