用逗号分隔的css列表——我想要一个牛津逗号

Question

考虑到牛津逗号的险恶未来，我正在尝试将一个旧的CSS技巧扩展到新的长度。我喜欢牛津逗号。我希望我的内联列表使用它。也就是说,

我想要这个html

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

显示如下:

apple, orange, & banana

---

现在我可以让它显示为

apple, orange & banana

使用这个CSS:

#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: " & ";
}

但是问题，你看，我们不能简单地把最后一个语句改为content: ", & "，因为只有两个项的列表会看起来很愚蠢。像

I like to eat apples, & bananas

---

所以对于一个包含3个或更多元素的列表，我想在倒数第二个元素后面加一个逗号。对于包含两个元素的列表，我不需要逗号。

Answer 1

我添加了这个额外的规则，它似乎做你想做的:

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

Answer 2

我还没有足够的声望来留下评论，但我有一些我认为有用的东西要分享。

我对chadoh的改进版Taze T. Schnitzel的答案做了一个JSfiddle演示。我还收录了Taze的原始答案和chadoh的第一次尝试答案，并对其进行了评论。下面是演示:http://jsfiddle.net/u7rzA/