Question

当使用jquery选择器时，我偶然发现了奇怪的东西。

我的HTML：

<ul id="unordered-list">
    <li>
        <img src="https://www.google.com/images/srpr/logo4w.png" width="40" height="40"/>
        <input type="text" size="40"/>
        <input type="text" size="40"/>
    </li>
    <li>
        <img src="https://www.google.com/images/srpr/logo4w.png" width="40" height="40"/>
        <input type="text" size="40"/>
        <input type="text" size="40"/>
    </li>
</ul>

现在，如果我要在第一个输入中选择第一个输入来添加一些css，我会用它：

$("#unordered-list li:nth-child(1) input:nth-child(1)").css("border", "5px solid red");

现在我认为这是浏览器会这样做的：
1.浏览器选择#unordered-list元素 2.浏览器然后选择第一个li元素 3.浏览器然后选择它找到的第一个输入元素。

但这不会发生，它什么也不做这是因为它实际上试图选择img，因为它是第一个孩子。

查看JQuery nth的文档：child：
http://api.jquery.com/nth-child-selector/

他们做同样的事情：

<script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</script>

这是一个展示问题的工作小说：
http://jsfiddle.net/uQYMz/

这似乎不符合逻辑，我希望输入：nth-child（1）选择第一个可用输入。这是预期的行为吗？如果是这样，是否有理由选择这种行为？

Answer 1

这是CSS Selectors规范中:nth-child的定义：

:nth-child(an+b)伪类表示法表示在文档树中具有+ b-1兄弟节点的元素，对于n的任何正整数或零值，并且具有父元素

它适用于一组兄弟姐妹中的所有元素，而不是特定类型的所有元素。还有另一个选择器，名称为:nth-of-type：

$("#unordered-list li:nth-child(1) input:nth-of-type(1)").css("border", "5px solid red");

这是一个updated fiddle。

您可以按如下方式阅读原始选择器：

选择#unordered-list元素
选择li元素，如果 :nth-child(1)处的元素是li元素
选择input元素，如果 :nth-child(1)处的元素是input元素

Answer 2

我只是想增加另一种可能性：

您也可以使用input:nth-of-type

，而不是使用input:first-of-type

“选择每个<input>元素作为其父级的第一个<input>元素

$("#unordered-list li:first-child input:first-of-type").css("border", "5px solid red");

CSS / JQuery选择器奇怪的行为

2 个答案: