CSS/JQuery 选择器奇怪的行为答案

【问题标题】：CSS/JQuery selectors odd behaviourCSS/JQuery 选择器奇怪的行为
【发布时间】：2013-06-18 14:12:05
【问题描述】：

在使用 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>

这是一个演示问题的有效 jsfiddle：
http://jsfiddle.net/uQYMz/

这似乎不合逻辑，我希望 input:nth-child(1) 选择第一个可用输入。这是预期的行为吗？如果是，是否有选择这种行为的原因？

【问题讨论】：

标签： jquery css jquery-selectors css-selectors

【解决方案1】：

这是 CSS 选择器规范中: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元素

【讨论】：

【解决方案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");

【讨论】：