sélecteurs CSS/JQuery comportement étrange

Question

Lorsque vous utilisez les sélecteurs jquery je suis tombé à quelque chose de bizarre.

Mon 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> 

Maintenant, si je devais choisir la première entrée dans la première entrée pour ajouter un peu css je un utiliserais ceci:

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

Maintenant, je pense que c'est ce que le navigateur ferait:
1. Le navigateur sélectionne l'élément #unordered-list.
2. Le navigateur sélectionne alors le premier élément li.
3. Le navigateur sélectionne alors le premier élément d'entrée qu'il trouve.

Mais cela n'arrive pas, il ne sélectionne rien. C'est parce qu'il essaie réellement de sélectionner le img car c'est le premier enfant.

regardant la documentation de JQuery nième: enfant:
http://api.jquery.com/nth-child-selector/

Ils font la même chose:

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

Voici un travail jsFiddle démontrant la question:
http://jsfiddle.net/uQYMz/

Cette juste ne semble pas logique, je me attends entrée: nième enfant (1) pour sélectionner la première des entrées disponibles. Est-ce un comportement voulu et si oui, y a-t-il une raison pour laquelle ce comportement est choisi?

Answer 1

Telle est la définition de :nth-child de la spécification CSS Selectors:

La notation pseudo-classe :nth-child(an+b) représente un élément qui a un + b-1 frères et soeurs avant dans l'arbre du document, pour tout entier positif ou zéro valeur de n, et a un élément parent

Elle concerne tous les éléments dans un ensemble de frères et sœurs, tous les éléments d'un type spécifique. Il y a un autre sélecteur pour que, bien nommé :nth-of-type:

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

Voici un updated fiddle.

---

Vous pouvez lire votre sélection d'origine comme suit:

• Sélectionnez l'élément #unordered-list
• Sélectionnez un élément lisi l'élément à :nth-child(1) est un élément li
• Sélectionnez une input élément si l'élément à :nth-child(1) est un élément input

Answer 2

Je veux juste ajouter une autre possibilité:

Au lieu d'utiliser input:nth-of-type vous pouvez également utiliser input:first-of-type

« Sélectionne tous les éléments <input> qui est le premier élément <input> de son parent "

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