Css selectors CSS选择器选择意外的元素

在尝试选择以下网页上的元素时，我发现了一些有趣的内容：

<div class="row">
    <div class="col-small-6">
        <toggle-switch params="label: $data.name">
            <a href="#" data-bind="click: clicked" class="trim noUnderline New">
                <span class="toggle-off"></span>
                &nbsp;
                <span data-bind="text: label">New</span>
            </a>
        </toggle-switch>
    </div>
    <div class="col-small-6">
        <toggle-switch params="label: $data.name">
            <a href="#" data-bind="click: clicked" class="trim noUnderline Placed">
                <span class="toggle-off"></span>
                &nbsp;
                <span data-bind="text: label">Placed</span>
            </a>
        </toggle-switch>
    </div>
    <div class="col-small-6">
        <toggle-switch params="label: $data.name">
            <a href="#" data-bind="click: clicked" class="trim noUnderline Opened">
                <span class="toggle-off"></span>
                &nbsp;
                <span data-bind="text: label">Opened</span>
            </a>
        </toggle-switch>
    </div>
</div>

（所示示例稍微简化，实际上有12个

元素，但我只显示了3个。不知道这是否有任何区别。）

为了选择我想要的

，我使用了以下CSS：

div.row div:n个子（1）切换开关类型（1）的跨度：n

所以我的选择器工作得很好。除非我想选择第二个
元素
。我的CSS是一样的，我用的是

div.row div:n个子（2）切换开关（1）类型的第n个span

但出于某种原因，它又找到了第一个。所有其他事件都在运行，如果我想选择第11个，我使用
div:nth child（11）
，它发现它没有问题

我的解决方案是使用：

div.row div:nth child（2）>切换开关类型（1）的跨度：n

我已经使用document.querySelector检查了Chrome和Firefox控制台中的CSS选择器，它们都有相同的结果

我的问题是，为什么第二种方法有效，而第一种方法无效？
不幸的是，我无法复制这个问题。当然，这个示例不使用WebDriver（这是我不熟悉的），但是：。如果有人想尝试使用WebDriver，您只需要使用FindElement中提供的选择器，例如
driver.FindElement（By.CssSelector（“div.row div:nth child（1）toggle switch a span:nth Of type（1）”）
或者您可以在Chrome或Firefox控制台中使用
document.querySelector（'div.row div:nth child（1）切换开关类型（1）；
。