我可能很愚蠢,但我正在尝试选择具有类 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>
重要提示:请注意我不能更改网站标记!
最佳答案
: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
的后续兄弟,不管这些元素有多少。然而,我更喜欢从节点列表中索引,因为意图更清晰。
关于javascript - 第 n 个类型元素的 css 选择器 - nth-of-type() 的奇怪实现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29372694/