1

使用 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) 选择第一个可用输入。这是预期的行为吗？如果是，是否有理由选择这种行为？

4

2 回答 2

3

这是:nth-child来自 CSS 选择器规范的定义：

: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");

这是一个更新的小提琴。

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

  • 选择#unordered-list元素
  • 如果at 的元素是一个元素，则选择一个li元素:nth-child(1)li
  • 如果at 的元素是一个元素，则选择一个input元素:nth-child(1)input
于 2013-06-18T14:17:17.190 回答
0

我只想添加另一种可能性：

除了使用input:nth-of-type你也可以使用input:first-of-type

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

$("#unordered-list li:first-child input:first-of-type").css("border", "5px solid red");
于 2013-06-18T14:26:01.820 回答