CSS/jQuery选择器的奇怪行为

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.浏览器然后选择第一个元素。
3.浏览器然后选择它找到的第一个输入元素。

但是这并没有发生，它没有选择任何东西。
这是因为它实际上试图选择img，因为它是第一个孩子。

望着JQuery的第n个的文档：孩子：
http://api.jquery.com/nth-child-selector/

他们做同样的事情：

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

这里有一个工作的jsfiddle演示该问题：
http://jsfiddle.net/uQYMz/

这只是看起来不合逻辑，我希望输入：nth-​​child（1）选择第一个可用输入。这是预期行为吗？如果是这样，是否有选择此行为的原因？

Answer 1

这是:nth-child从CSS选择规范的定义：

的:nth-child(an+b)伪类表示法表示在文档树具有+ B-1的兄弟姐妹之前它的元件，对于任何正整数或零值n，并具有一个父元素

它适用于所有元件在同级节点集，不是所有的元件的特定类型的。还有另一种选择为，适当命名​​：

$("#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");