javascript - 第 n 个类型元素的 css 选择器 - nth-of-type() 的奇怪实现

Question

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

为了测试目的，我想使用 document.querySelector("#content-wrapper > .specialclass:nth-of-type(2)"); 我想 nth-of- type 用于此。但它返回未定义。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 提供的限制。

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

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

你可以也可以使用类似的东西

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

如评论中所述，querySelector()(注意:不是 querySelectorAll())只会选取第一个这样的元素 — 这始终是最接近的 .specialclass 是第一个 .specialclass 的后续兄弟，不管这些元素有多少。然而，我更喜欢从节点列表中索引，因为意图更清晰。