CSS的逗号分隔列表 - 我想要牛津逗号!

Question

考虑到牛津逗号的阴险未来,我试图将旧的CSS技巧扩展到新的长度.我喜欢牛津逗号.我希望我的内联列表能够使用它.那是,

我想要这个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个或更多的列表,我想在倒数第二个元素之后使用逗号.对于两个列表,我不想要逗号.

Answer 1

我添加了这个额外的规则,它似乎做你想要的:

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