结合:CSS中的last-child与:not(.class)选择器

Question

是否可以选择没有班级attr的最后一个孩子？像这样:

<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-of-class伪类.请参阅我对此相关问题的回答.

截至2015年底,实现已经开始慢慢进入Selectors 4的扩展,:nth-child()并:nth-last-child()允许您传递任意选择器作为参数(更多关于链接答案的更新).然后,您将能够编写以下内容:

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

虽然最近已经开始实施,但至少还需要几年的时间才能得到广泛的支持(截至2018年4月,作为第一个浏览器发布后的两年半,Safari仍然是唯一拥有的浏览器这样做).在此期间,您将不得不使用其他东西,比如在有问题的类之前的额外类或jQuery选择器:

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