Question

考虑到old CSS trick的阴险未来，我试图将the Oxford Comma扩展到新的长度。我喜欢牛津逗号。我希望我的内联列表能够使用它。也就是说，

我想要这个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's answer的JSfiddle演示。我还包括并评论了Taze的原始答案和chadoh的第一次尝试答案。以下是演示：http://jsfiddle.net/u7rzA/

CSS的逗号分隔列表 - 我想要牛津逗号！

2 个答案: