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

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

在 CSS 中，经常需要根据多个条件选择特定元素。一个这样的情况是选择最后一个没有特定班级的孩子。虽然看起来很简单，但仅使用 :last-child 和 :not(.class) 选择器不会产生所需的结果。

使用 :last-child 和 :not(.class)

:last-child 选择器针对元素的最后一个子元素，而 :not(.class) 选择没有指定类的元素。但是，这些选择器不能直接组合以达到所需的效果。

考虑以下示例：

<tr>

目标是选择第三行，该行没有“table_vert_controls” “ 班级。以下 CSS 规则不起作用：

tr:not(.table_vert_controls):last-child

此规则将选择最后一行，无论它是否具有“table_vert_controls”类。

替代解决方案

由于 CSS 选择器本身无法处理这种特定组合，因此替代解决方案是必需：

• 使用附加类：在所需类之前向元素添加附加类，例如“last-child-no-class”。然后，使用以下规则：

.last-child-no-class:not(.table_vert_controls)

• jQuery 选择器：利用 jQuery 更强大的选择器引擎来选择所需的元素：

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

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