Question

我想知道为什么foo正在记录一个值，而bar不是。它们在语法上似乎也相同。

编辑：这是一个X-Y问题。我的目标是使用类foo来获取最后一个元素，而我尝试使用last-child来获取。我尝试last-of-type无济于事。

const foo = document.querySelector(".some-element:last-child")
const bar = document.querySelector(".foo:last-child")

console.log('foo >>',foo)
console.log('bar >>',bar)

<article>
  <div class="foo">This `div` is first.</div>
  <div class="foo">This <span>nested `span` is last</span>!</div>
  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
</article>
<ul>
  <li class="some-element">1</li>
  <li class="some-element">2</li>
  <li class="some-element">3</li>
</ul>

Answer 1

您可以使用querySelectorAll()逐级选择所有元素。

要获取类的最后一个元素，请尝试以下操作：

const bar = document.querySelectorAll(".foo")
console.log( 'bar >>', bar[bar.length - 1] )

看看Selectors Overview

如何选择特定类别的最后一个元素

1 个答案: