如何不使用querySelectorAll获取特定类或属性的最后一个元素

DevOps 小满

2026-7-27

问题分析

你用:last-child失效的原因很明确：这个伪类的逻辑是匹配父元素的最后一个子元素，且该元素同时满足前面的选择器条件。但你的#wrapper最后几个子元素都是.ghi，既没有db="box"属性也不是.abc类，所以自然返回null。

正确的选择器写法

要直接选中父元素内最后一个符合特定条件的子元素，可以使用CSS Selectors Level 4新增的:nth-last-child(An+B of <selector>)语法，它能在父元素的所有子元素中筛选出符合<selector>的元素，再取倒数第N个。

针对`db="box"`属性的元素

console.log(document.querySelector('#wrapper>:nth-last-child(1 of [db="box"])'));

针对`.abc`类的元素

console.log(document.querySelector('#wrapper>:nth-last-child(1 of div.abc)'));

代码验证

把上述选择器替换到你的示例代码中，就能正确获取到最后一个符合条件的元素：

<div id="wrapper">
    <div class="abc" db="box"></div>
    <div class="abc" db="box"></div>
    <div class="abc" db="box"></div>
    <div class="def"></div>
    <div class="abc" db="box"></div>
    <div class="ghi"></div>
    <div class="abc" db="box"></div>
    <div class="ghi"></div>
    <div class="ghi"></div>
</div>
<script>
    // 正确获取最后一个带db="box"的子元素
    console.log(document.querySelector('#wrapper>:nth-last-child(1 of [db="box"])'));
    // 正确获取最后一个.abc类的子元素
    console.log(document.querySelector('#wrapper>:nth-last-child(1 of div.abc)'));
</script>

兼容性说明

这个语法属于CSS Selectors 4标准，目前支持的浏览器版本包括：