CSS中如何选择没有特定类的最后一个孩子？

在 CSS 中将 :last-child 与 :not(.class) 选择器组合

选择最后一个没有特定的子级class 属性似乎是一个简单的任务，但它在 CSS 中提出了挑战。

问题：

考虑以下 HTML 结构：

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

目标是选择第三行，这是最后一个没有“table_vert_controls”类的子行。但是，以下选择器不起作用：

tr:not(.table_vert_controls):last-child

CSS 选择器的限制：

CSS 选择器，包括 :last-child，专门针对最后一个子级一个元素的。但是，没有等效的伪类来选择没有特定类的元素的最后一个子元素。

使用选择器的解决方案 4：

后期2015 年，Selectors 4 引入了 :last-child 的扩展，允许将任意选择器作为参数传递。这将启用以下选择器：

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

浏览器支持：

虽然某些浏览器已经开始实现此扩展，但它仍然没有得到广泛支持。

替代解决方案：

在此扩展得到更广泛支持之前，替代方法包括：

• 在“table_vert_controls”类之前添加一个附加类
• 使用 jQuery：$(tr:not(.table_vert_controls):last)

以上是CSS中如何选择没有特定类的最后一个孩子？的详细内容。更多信息请关注PHP中文网其他相关文章！