Jak kierować konkretny element div w CSS na element <img>?

Question

Mam kod niektóre co takiego:

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

Teraz moje pytanie brzmi jak mogę kierować konkretnego obrazu w CSS, gdy o powyższy kod?

Answer 1

Możesz dodać klasę do obrazów lub

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

lub

#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*/} 

To powinno wystarczyć.

Answer 3

Wszystkie poniższe rozwiązania działają tylko w najnowszych przeglądarkach.

można wybrać według pozycji dziecka:

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

można wybrać według pozycji dziecka, licząc tylko obrazów:

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

można wybrać według obrazu URL:

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

Answer 4

To zależy całkowicie od tego, który obraz chcesz skierować. Zakładając, że jest to pierwszy (choć implementacje są podobne dla obu) image:

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


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

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

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

Referencje:

• CSS3 selectors.

Answer 5

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

działa we wszystkich przeglądarkach, w tym IE7 +.

Answer 6

Nie wiem, dlaczego wszyscy są tak naprawieni w div #foo. Możesz kierować się znacznikiem img, a nawet nie martwić się znacznikiem div. Te selektory atrybutów wybiera się przez "zaczyna się od".

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

Wybrane przez "zawiera".

img[src*="bar"] { css } 
img[src*="cat"] { css } 

Lub można wybrać według dokładnego src.

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

Jeśli chcesz kierować je obie, możesz użyć identyfikatora div.

#foo img { css } 

Dla jednego z obrazów nie ma potrzeby martwić się o #foo div w ogóle.