带有 CSS 的逗号分隔列表——我想要一个牛津逗号！答案

【问题标题】：comma-delimited lists with CSS—I want an Oxford Comma!带有 CSS 的逗号分隔列表——我想要一个牛津逗号！
【发布时间】：2011-07-08 00:27:16
【问题描述】：

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

我想要这个 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 个或更多的列表，我希望在倒数第二个元素后加一个逗号。对于两个列表，我不需要逗号。

【问题讨论】：

您是否尝试过使用两个元素的代码？它正在工作
它可以工作，但它没有牛津逗号。
+1 表示牛津逗号

标签： html css

【解决方案1】：

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

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

【讨论】：

完美！我不知道General Sibling Combinator！这也可以通过使用较少字符的相邻兄弟组合器来完成，使用#taglist li:nth-last-child(3) + li:after。

【解决方案2】：

我还没有足够的声望离开 cmets，但我有一些我认为有帮助的东西要分享。

我做了一个 JSfiddle 演示 chadoh 的改进版 Taze T. Schnitzel's answer。我还包括并注释掉了 Taze 的原始答案和 chadoh 第一次尝试的答案。这是演示：http://jsfiddle.net/u7rzA/

【讨论】：