Probleme mit Nightwatch.js und nth-child (css)

Question

Ich habe ein paar der folgenden Elemente in meinem Code.

<img src="/images/myImage.jpg" alt="myImage">

Sie sind nur in den Körper der Seite. Mit img[src='/images/myImage.jpg']:nth-child(1) wird das erste dieser Elemente abgerufen. Aber warum kann ich img[src='/images/myImage.jpg']:nth-child(2) nicht verwenden, um das zweite Element zu finden? 3,4 oder 5 funktionieren auch nicht. Nur N-Kind (1) arbeitet.

Irgendwelche Ideen?

Answer 1

Verwenden Sie nur img:nth-child(N), wobei N für eine Zahl angibt.

Answer 2

Wenn Sie andere HTML-Elemente mit den Tags <img> gemischt haben, müssen Sie :nth-of-type verwenden. Wie in:

img[src='/images/myImage.jpg']:nth-of-type(2) 

Es gibt ein Problem, scrollen Sie nach unten über die Demo, um mehr zu lesen.

Demo

img[src='http://placehold.it/200x40']:nth-of-type(3) { 
 
    border: 5px solid black; 
 
}

<img src="http://placehold.it/200x40" alt="test"> 
 
<div></div> 
 
<img src="http://placehold.it/200x40" alt="test"> 
 
<div></div> 
 
<img src="http://placehold.it/200x40" alt="test"> 
 
<div></div> 
 
<img src="http://placehold.it/200x40" alt="test"> 
 
<div></div> 
 
<img src="http://placehold.it/200x40" alt="test"> 
 
<div></div> 
 
<img src="http://placehold.it/200x40" alt="test"> 
 
<div></div> 
 
<img src="http://placehold.it/200x40" alt="test">

Hinweis
Haltungsart Geist :nth-of-type und :nth-child sind psuedo-Klassen und nur auf Elemente angewendet werden kann, nicht Attribute oder Klassen. Das bedeutet, dass img[src='myImage.jpg']:nth-of-type(4) das 4. img Element auswählt, aber nur wenn es eine src übereinstimmende myImage.jpg hat. Hier ist ein Beispiel.

<img src="http://placehold.it/100x20" alt="test"> 
<img src="http://placehold.it/100x20" alt="test"> 
<img src="http://placehold.it/100x20" alt="test"> 
<img src="http://placehold.it/200x40" alt="test"> 
<img src="http://placehold.it/100x20" alt="test"> 

img[src='http://placehold.it/200x20']:nth-of-type(4) 

Dies führt nicht in jedem Stil ändern, wie der 4. img hat kein src das Attribut in den CSS-Selektor übereinstimmen. Allerdings:

img[src='http://placehold.it/200x20']:nth-of-type(5) 

den Stil auf den fünften img seit dem 5. Bild des src Begegnungen der Wähler gelten.