为什么 `nth-of-type` 在不同的浏览器版本中表现不同?

Why `nth-of-type` behaves differently in different browser versions?

问题:

所以我 运行 发现 :nth-of-type 选择器在应用于选择器中未指定标签类型的元素时的行为有特殊差异。

采取以下HTML:

<div class="parent-class">
    <header>...</header>
    <div class="child-class">...</div>
    <div class="child-class">...</div>
</div>

现在,这个选择器

.parent-class .child-class:nth-of-type(1)

应该可能指向第一个子 div 元素,它在 Chrome 59Firefox 54[=41 中确实如此=],但在 Mink 驱动的 Selenium 浏览器中没有(Chrome 53 来自 selenium/hub:3.0.1-fermium 和 Firefox 50 来自 selenium/node-firefox-debug:2.53.0).

nth-of-type 在这些浏览器中所做的是完全忽略元素类型 - 意思是,要使选择器起作用,必须指定:

.parent-class .child-class:nth-of-type(2)

.parent-class div.child-class:nth-of-type(1)

问题:

为什么元素类型在 Selenium 浏览器中被忽略?

据了解,Selenium 与 :nth-of-type() 有问题。也许这是 Mink 的一个错误,因为这种行为显然是不正确的——:nth-of-type() 不应该需要类型选择器才能工作,如我的回答 here.

中所述

这是 Mink

使用的 Symfony CssSelector 组件的限制

Mink 使用 CssSelector 将元素转换为驱动程序可解释的 xpath

而且这个工具根本就没有完全支持几种类型的CSS选择器,其实在official documentation:

Several pseudo-classes are not yet supported:

*:first-of-type, *:last-of-type, *:nth-of-type, *:nth-last-of-type, *:only-of-type. (These work with an element name (e.g. li:first-of-type) but not with *.