danh sách được phân tách bằng dấu phẩy với CSS — Tôi muốn có một Dấu phẩy Oxford!

Question

Tôi đang cố gắng mở rộng old CSS trick đến độ dài mới, có tính đến tương lai nham hiểm của the Oxford Comma. Tôi thích Oxford Comma. Tôi muốn danh sách nội tuyến của mình sử dụng nó. Đó là,

Tôi muốn html này

<ul id="taglist"> 
    <li>apple</li> 
    <li>orange</li> 
    <li>banana</li> 
</ul> 

xuất hiện như thế này:

apple, orange, & banana 

---

Bây giờ, tôi có thể lấy nó để hiển thị như

apple, orange & banana 

sử dụng CSS này:

#taglist { 
    display: inline; 
    list-style: none; 
} 

#taglist li { 
    display: inline; 
} 

#taglist li:after { 
    content: ", "; 
} 

#taglist li:last-child:after { 
    content: ""; 
} 

#taglist li:nth-last-child(2):after { 
    content: " & "; 
} 

nhưng vấn đề, bạn sẽ thấy, đó là chúng ta không thể chỉ đơn giản là thay đổi điều đó tuyên bố cuối cùng để content: ", & " vì danh sách với chỉ hai mục này sẽ trông ngu ngốc. Giống như

I like to eat apples, & bananas 

---

Vì vậy, để có danh sách của 3 hoặc nhiều hơn, tôi muốn có một dấu phẩy sau phần tử thứ hai-to-ngoái. Đối với danh sách hai, tôi không muốn có dấu phẩy.

Answer 1

tôi đã thêm quy tắc thêm này, nó xuất hiện để làm những gì bạn muốn:

#taglist li:nth-last-child(3) ~ li:nth-last-child(2):after { 
    content: ", & "; 
} 

Answer 2

tôi không có đủ uy tín để lại ý kiến ​​được nêu ra, nhưng tôi có một cái gì đó để chia sẻ mà tôi nghĩ là hữu ích.

Tôi đã tạo bản trình diễn JSfiddle về phiên bản cải tiến của chadoh Taze T. Schnitzel's answer. Tôi cũng đã bao gồm và nhận xét câu trả lời ban đầu của Taze và nỗ lực đầu tiên của chadoh tại một câu trả lời. Đây là bản demo: http://jsfiddle.net/u7rzA/