微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐