Javascript 中具有指定索引的 QuerySelector（如 [1]）

Question

我该如何制作：

document.getElementsByClassName("first")[1].getElementsByClassName("second")[2];

但是用querySelector呢？

---

我的猜测是：

document.querySelector(".first[1] > .second[2]");

但这是行不通的。

Answer 1

在您的原始选择中，您将获取类为 的第二个元素.first，而类为 的第三个元素.second也是前者的子元素。考虑到这一点，您可以对这两个类使用第 n 个类型的伪选择器并相应地进行计数。与现在的 JS 相比，此方法的唯一区别是它不使用零索引。

// document.getElementsByClassName("first")[1].getElementsByClassName("second")[2];

document.querySelector('.first:nth-of-type(2) .second:nth-of-type(3)').style = 'border: 1px solid red;'

.first {
  border: 1px solid black;
  padding: 10px;
}

.first:nth-of-type(2) {
  margin-top: 10px;
}

<div class="first">
  <div class="second">Second (1)</div>
  <div class="second">Second (2)</div>
  <div class="second">Second (3)</div>
</div>

<div class="first">
  <div class="second">Second (1)</div>
  <div class="second">Second (2)</div>
  <div class="second">Second (3)</div>
</div>