第 n 个类型元素的 css 选择器 - 第 n 个类型（）的奇怪实现

Question

我可能很愚蠢，但我正在尝试选择具有类 specialclass 的第二个 div。什么是正确的 querySelector？

出于测试目的，我想使用document.querySelector("#content-wrapper > .specialclass:nth-of-type(2)"); 我认为nth-of-type 用于此目的。但它返回 undefined.nth-of-type 以及 nth-child 似乎从父元素开始计算。问题是元素的顺序经常变化。

网站结构

 <div id="content-wrapper">
  <div class="a"></div>
  <div class="a"></div>
  <div class="specialclass">Can be selectet through document.querySelector(".specialclass:nth-of-type(3)");</div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="specialclass">element I'd like to select. Can be selectet through document.querySelector(".specialclass:nth-of-type(7)");</div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
</div>

重要提示：请注意我不能更改网站标记！

Answer 1

:nth-of-type() 中的“类型”指的是元素类型，在本例中为 div。由于子元素都是div 元素，:nth-of-type() 的功能与:nth-child() 相同。这完全是设计使然。

虽然trying to select the nth child matching a specific selector 的一般问题通常与对:nth-of-type() 工作原理的误解有关，但这个问题与其他问题并不完全重复，因为它们都是基于 CSS 的，这带来了某些限制：选择器 API 中不存在，例如 DOM 提供的 API。

在您的特定情况下，您可以使用querySelectorAll() 选择所有.specialclass 元素并从结果节点列表中索引以获得您想要的，而不是尝试使用querySelector() 检索单个元素（请记住，这是一个从零开始的索引，不像结构伪类是从一开始的）：

var secondElement = document.querySelectorAll("#content-wrapper > .specialclass")[1];

你可以也使用类似的东西

var secondElement = document.querySelector("#content-wrapper > .specialclass ~ .specialclass");

如 cmets 中所述，querySelector()（注意：不是querySelectorAll()）只会拾取第一个这样的元素——这始终是最接近的.specialclass，它是第一个.specialclass 的后续兄弟，无论如何这些元素有多少。但是我更喜欢从节点列表中索引，因为意图更清晰。