CSS 选择器最后一个元素答案

【问题标题】：CSS selctor last elementCSS 选择器最后一个元素
【发布时间】：2022-06-23 02:48:34
【问题描述】：

我正在处理一个看起来像这样的HTML 文档。

它包含几个<li></li> 元素。目前它包含两个。但它本质上是动态的，而且可以更多。

console.log(document.querySelectorAll('li.lia-paging-page-last&gt;a')[1].getAttribute('href'))

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>   
    <li class="lia-paging-page-last lia-js-data-pageNum-39">
      <a class="lia-js-data-pageNum-109 lia-link-navigation lia-custom-event" aria-label="Page 39" id="link_8" href="abc.com">129</a>
    </li>    
    <li class="lia-paging-page-last lia-js-data-pageNum-49">
      <a class="lia-js-data-pageNum-109 lia-link-navigation lia-custom-event" aria-label="Page 49" id="link_77" href="xyz.com">229</a>
    </li>
  </body>
</html>

我需要查询最后一个<li></li> 元素的href。有没有可以返回最后一个元素的 CSS 选择器？

目前，我正在这样做并将长度 1 硬编码为 [1] 以选择最后一个元素。如果有办法使用可以始终返回最后一个元素的 CSS 选择器，我想绕过它。

document.querySelectorAll('li.lia-paging-page-last>a')[1].getAttribute('href')

我也试过了，还是不行。

document.querySelectorAll('li.lia-paging-page-last>a:last-of-type').getAttribute('href')

【问题讨论】：

标签： javascript css css-selectors

【解决方案1】：

我想你正在寻找 :last-child

【讨论】：