querySelectorAll 并选择特定的孩子

Question

假设我有下面的 HTML

HTML

<div class="container">
  <p>Test1</p>
  <p>Test5</p>
</div>

<div class="container">
  <p>Test3</p>
  <p>Test7</p>
</div>

我想.container通过 vanilla javascript（Test5 和 Test 7）在每个中选择第二个孩子。

我该怎么做？

如果我这样做

var container = document.querySelectorAll(".container p");
console.log(container[1]);

它只返回 Test5 而不是两个容器中的第二个孩子

有什么建议？谢谢！

Answer 1

使用:nth-child选择器：

var secondChilds = document.querySelectorAll(".container p:nth-child(2)");
console.log(secondChilds);

<div class="container">
  <p>Test1</p>
  <p>Test5</p>
</div>

<div class="container">
  <p>Test3</p>
  <p>Test7</p>
</div>