考虑到
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: ",& ";
}
