Ký quỹ trên mỗi phần tử ngoại trừ

Question

Tôi có 2 dòng CSS để đặt lề trên mọi phần tử ngoại trừ phần tử cuối cùng. Có cách nào để kết hợp nó thành 1 dòng không?

Đây là những gì tôi đã hiện (làm việc):

.work img { 
    margin-right: 10px; 
} 

.work img:last { 
    margin-right: 0px; 
} 

tôi đã cố gắng thay đổi nó để:

.work img:not(:last) { 
    margin-right: 10px; 
} 

Nhưng nó không làm việc? Bất kỳ ý tưởng tại sao?

CẬP NHẬT Tôi chỉ có năm hình ảnh. Lựa chọn khác của tôi là chỉ có lợi nhuận trên bốn đầu tiên.

Answer 1

Bạn có sai lầm nhỏ

Thay đổi:

.work img:not(:last) 

để

.work:not(:last-child) 

Kiểm tra Fiddle Here.

Answer 2

Hãy thử điều này:

.work img { 
    margin-right: 10px; 
} 

.work img:last-child { 
    margin-right: 0px; 
} 

hoặc

.work img:not(:last-child) { 
    margin-right: 10px; 
} 

hoặc giải pháp jQuery:

jQuery('.work img:not(:last)').css({marginRight: 10); 

Hãy nhớ rằng, cần trình duyệt của bạn để có sự hỗ trợ cho bộ chọn nếu bạn áp dụng CSS tinh khiết.

Xem này để tham khảo: http://caniuse.com/#search=%3Alast-child

Answer 3

Nếu bạn cần hỗ trợ trình duyệt đầy đủ, tôi sẽ đề nghị sử dụng một số javascript, hoặc thêm một lớp của .last trên img ngoái. Nếu không, bạn chỉ có thể làm:

.work img:last-child { 
    margin: 0; 
}