html – 以逗号分隔的列表,我想要一个牛津逗号！

概述考虑到 the Oxford Comma的阴险未来,我试图将 old CSS trick延长到新的长度.我喜欢牛津逗号.我希望我的内联列表使用它.那是, 我想这个html <ul id="taglist"> <li>apple</li> <li>orange</li> <li>banana</li></ul> 显示为： apple, orange, & banana 现在我可以让它显 考虑到 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: " & ";}

但是,您看到的问题是,我们不能简单地将最后一个语句更改为内容：“,&”,因为只有两个项目的列表将看起来很愚蠢.喜欢

I like to eat apples,& bananas

因此,对于3个或更多的列表,我想要在第二个到最后一个元素之后的逗号.对于两个列表,我不需要逗号.

解决方法 我添加了这个额外的规则,它似乎做你想要的：

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

总结

以上是内存溢出为你收集整理的html – 以逗号分隔的列表,我想要一个牛津逗号！全部内容，希望文章能够帮你解决html – 以逗号分隔的列表,我想要一个牛津逗号！所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。