Question

我可能很愚蠢但是我试图选择具有类特殊类的第二个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

＆＃34;类型＆＃34; in :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提供的限制。

在您的特定情况下，您可以使用querySelector()选择所有querySelectorAll()元素，并将生成的节点列表索引为“{1}}，而不是尝试使用.specialclass检索单个元素得到你想要的那个（记住这是一个从零开始的索引，不像基于一个的结构伪类）：

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

你可以也使用类似

的内容

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

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

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

1 个答案: