CSS 中没有特定类的情况下可以选择最后一个子元素吗？

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

在 CSS 中，可以选择最后一个子元素缺少指定的类？例如，考虑以下 HTML 结构：

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

如何使用 CSS 选择器仅选择第四行？尝试使用以下选择器是不够的：

tr:not(.table_vert_controls):last-child

不幸的是，单独使用 CSS 选择器来实现这一点是不可行的。 :last-child 伪类专门针对最后一个孩子，并且没有类似的 :last-of-class 伪类。

截至 2015 年，选择器 4 引入了 :nth-child() 和 :nth-last-child() 的扩展选择器，允许使用任意选择器作为参数。这将允许使用以下语法：

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

但是，截至 2018 年 4 月，只有 Safari 支持此功能，因此广泛的兼容性还需要几年的时间。

替代方法：

在此期间，必须采用替代方法：

• 添加额外类：在目标类之前添加一个类，然后选择该新类的最后一个子级。
• jQuery 选择器： 使用 jQuery 选择器：

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

以上是CSS 中没有特定类的情况下可以选择最后一个子元素吗？的详细内容。更多信息请关注PHP中文网其他相关文章！