我将以图片形式说明这一点:
您可以看到这里有23个匹配的节点。
如何获得第一个?您会认为:
document.querySelectorAll('.vdatetimeCal > div > .cell.day:not(.day-header):nth-of-type(1)')
但是不...
返回空节点列表!
快速浏览HTML提供了一些线索:
啊哈-所以...你猜怎么着:
document.querySelectorAll('.vdatetimeCal > div > .cell.day:not(.day-header):nth-of-type(8)')
这可行!
谁能解释这是怎么回事?!
document.querySelectorAll('.vdatetimeCal > div > .cell.day:not(.day-header)
返回不具有cell
的day
day-header
。但是,nth-of-type的伪类在其父级中指定标签类型的索引。您的第一个选择器具有两个互斥的伪类,因为nth-of-type(1)
会产生一个div
,其中class
的day-header
被:not
排除。 nth-of-type(8)
有效,因为您使用的伪类不会过滤掉span
。