如何通过CSS选择器选取最后一个指定类li下a标签的href属性

你之前写的li.lia-paging-page-last>a:last-of-type不生效，是因为:last-of-type只会匹配同一个父节点下同标签类型的最后一个子元素。你当前DOM里每个带lia-paging-page-last类的li，都是各自父ul下唯一的li子元素，这个选择器会把所有目标li下的a都匹配到，自然拿不到全局最后一个目标。

纯CSS选择器方案（现代浏览器支持） #

CSS Selectors Level 4 新增了nth-last-child的条件筛选语法，可以直接匹配符合指定规则的最后一个元素，直接用querySelector就能拿到目标a标签，不需要处理集合下标：

// 直接选中最后一个带目标类的li下的a标签
const lastLink = document.querySelector('li.lia-paging-page-last:nth-last-child(1 of li.lia-paging-page-last) > a')
console.log(lastLink.href)

这个方案在Chrome 111+、Firefox 113+、Safari 15.4+版本可正常运行。

全兼容JS方案（无硬编码下标） #

如果需要兼容旧浏览器，不需要写死固定下标，直接取查询结果集合的长度减1位即可，动态增减元素时也能自动适配：

const allLinks = document.querySelectorAll('li.lia-paging-page-last > a')
// 取集合最后一项，不需要硬编码固定数字
const lastLink = allLinks[allLinks.length - 1]
console.log(lastLink.getAttribute('href'))

这个写法没有任何兼容性问题，比硬编码[1]灵活很多，不管后续页面生成多少个目标li，都能正确拿到最后一个内部的链接。

内容的提问来源于stack exchange，提问作者smpa01