Cách nhắm mục tiêu một phần tử <img> cụ thể của div trong CSS?

Question

Tôi đã một quy tắc ứng một số điều như thế này:

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

Bây giờ câu hỏi của tôi là làm thế nào để tôi nhắm mục tiêu một hình ảnh cụ thể trong CSS khi có mã trên?

Answer 1

Bạn có thể thêm một lớp học để những hình ảnh HOẶC

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

hoặc

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

Điều đó sẽ thực hiện.

Answer 3

Tất cả các giải pháp sau chỉ có tác dụng trong các trình duyệt gần đây.

Bạn có thể chọn bởi vị trí của đứa trẻ:

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

Bạn có thể chọn bởi vị trí của con, đếm hình ảnh chỉ:

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

Bạn có thể chọn bởi URL hình ảnh:

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

Answer 4

Nó phụ thuộc hoàn toàn vào hình ảnh bạn muốn nhắm mục tiêu. Giả sử đó là người đầu tiên (mặc dù việc triển khai tương tự cho cả hai) hình ảnh:

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


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

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

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

Tài liệu tham khảo:

• CSS3 selectors.

Answer 5

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

Làm việc trong tất cả các trình duyệt bao gồm IE7 +.

Answer 6

Tôi không biết tại sao mọi người lại cố định trên div #foo. Bạn có thể nhắm mục tiêu thẻ img và thậm chí không lo lắng về thẻ div. Các bộ chọn thuộc tính này được chọn bởi "bắt đầu bằng".

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

Những lựa chọn này bằng "chứa".

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

Hoặc bạn có thể chọn theo chính xác src.

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

Nếu bạn muốn nhắm mục tiêu cả hai, thì bạn có thể sử dụng id div.

#foo img { css } 

Đối với một trong những hình ảnh, không cần phải lo lắng về #foo div chút nào.