Khó tìm bộ chọn để sử dụng cho khoảng đầu tiên trong div

Question

Làm cách nào để tôi có thể nhắm mục tiêu kiểu thứ nhất (Foo) mà không ảnh hưởng đến khoảng thứ 2 (Bar) tốt nhất mà không sử dụng lớp học? Hỗ trợ IE6 là không cần thiết. Tôi đã thử sử dụng con đầu lòng nhưng chỉ hoạt động mà không có hình ảnh ở đó.

Tôi có thể sống với sự xuống cấp nếu tôi sử dụng ".adcodeblock span: nth-child (3)", nhưng tôi nghĩ tôi sẽ kiểm tra với những người có kinh nghiệm hơn trước.

<div class="adcodeblock"> 
    img src="/images/aUHFgK.jpg" alt="" border="0"> 
    <br> 
    <span>Foo</span> 
    <span>Bar</span> 
</div> 

Answer 1

Bạn có thể sử dụng :first-of-type pseudo-class:

.adcodeblock span:first-of-type 

Xem this cho một bảng hỗ trợ trình duyệt. Đối với các trình duyệt cũ Tôi sẽ sử dụng một cái gì đó như thế này:

.adcodeblock br + span 

Answer 2

Nếu bạn có thể sống mà không có IE8 và dưới đây, bạn có thể thử

.adcodeblock span:nth-of-type(1)