Wie zielen Sie auf ein bestimmtes <img> Element eines div in CSS?

Question

Ich habe einen Code von einigen, was wie folgt aus:

<div id="foo"> 
<img src="bar.png" align="right"> 
<img src="cat.png" align="right"> 
</div> 

Nun meine Frage ist, wie richte ich ein bestimmtes Bild in CSS, wenn Sie den obigen Code zu haben?

Answer 1

Sie können eine Klasse zu den Bildern hinzufügen oder

#foo img:nth-child(2) { css here } 

oder

#foo img:first-child { css here } 
#foo img:last-child { css here } 

Answer 2

div > img:first-child {/*the first image*/} 
div > img:last-child {/*the last image*/} 

Das sollte es tun.

Answer 3

Alle folgenden Lösungen nur in neueren Browsern funktionieren.

Sie können von Kind Position wählen:

#foo img:first-child { /* for the bar */ } 
#foo img:nth-child(2) { /* for the cat */ } 

Sie von Kind Position auswählen können, zählen nur Bilder:

#foo img:first-of-type { /* for the bar */ } 
#foo img:nth-of-type(2) { /* for the cat */ } 

Sie von Bild-URL auswählen können:

#foo img[src^=bar] { /* for the bar */ } 
#foo img[src^=cat] { /* for the cat */ } 

Answer 4

Es hängt ganz davon ab, auf welches Bild Sie zielen möchten. Unter der Annahme, es das erste ist (obwohl die Implementierungen für beide ähnlich sind) Bild:

#foo img[src="bar.png"] { 
    /* css */ 
} 


#foo img[src^="bar.png"] { 
    /* css */ 
} 

#foo img:first-child { 
    /* css */ 
} 

#foo img:nth-of-type(1) { 
    /* css */ 
} 

Referenzen:

• CSS3 selectors.

Answer 5

#foo > IMG:first-child {/* first of two IMGs */} 
#foo > IMG + IMG  {/* second one */} 

Arbeiten in allen Browsern einschließlich IE7 +.

Answer 6

Ich weiß nicht, warum alle auf der #foo div so fest sind. Sie können das img-Tag ausrichten und sich nicht einmal um das div-Tag kümmern. Diese Attributselektoren werden mit "beginnt mit" ausgewählt.

img[src^=bar] { css } 
img[src^=cat] { css } 

Diese wählen Sie durch "enthält".

Oder Sie können durch die genaue src auswählen.

img[src="bar.png"] { css } 
img[src="cat.png"] { css } 

Wenn Sie beide anvisieren möchten, dann könnten Sie die Div-ID verwenden.

Für nur eines der Bilder, gibt es keine Notwendigkeit, sich über das #foo div zu kümmern.