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

我试图将old CSS trick延长到新的长度，考虑到the Oxford Comma的险恶未来。我喜欢牛津逗号。我想让我的内联列表使用它。也就是说，用逗号分隔的CSS列表 - 我想要一个牛津逗号！

我想这个网站

<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个或更多的列表，我希望第二个到最后一个元素之后逗号。对于两个列表，我不需要逗号。

来源

2011-07-05 chadoh

你试过你的代码有两个元素？它正在工作 –

它的工作原理，但它没有牛津逗号。 – Andrea

牛津逗号+1号 – erroric

我加入这个额外的规则，它似乎你想要做什么：

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

来源

2011-07-05 19:32:50 Andrea

完美！我不知道[General Sibling Combinator]（普通同胞组合器）（http://ajaxian.com/archives/css-general-sibling-combinator-in-action）！这也可以通过使用'#taglist li：nth-last-child（3）+ li：after'之后的相邻兄弟组合器来完成。 – chadoh

我没有足够的信誉发表评论，但我有话要分享，我认为是有帮助的。

我做了一个JSFiddle演示了chadoh的改进版Taze T. Schnitzel's answer。我还包括并评论了Taze的原始答案和chadoh的第一个答案。这里是演示：http://jsfiddle.net/u7rzA/

来源

2011-07-07 16:27:16

非常有帮助！谢谢！ – chadoh

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

回答

相关问题