结合CSS伪元素，“：”之后：“最后一个孩子”
我想使用CSS来创build“语法正确”的列表。 这是我迄今为止：
<li>标签以逗号后面的水平显示。
li { display: inline; list-style-type: none; }
li:after { content: ", "; }
这是有效的，但我希望“最后一个孩子”有一个句号，而不是逗号。 而且，如果可能的话，我想把“和”放在“最后一个孩子”之前。 我造型的列表是dynamic生成的，所以我不能只给“最后一个孩子”一个类。 你不能合并伪元素，但这基本上是我想达到的效果。
li:last-child li:before { content: "and "; }
li:last-child li:after { content: "."; }
我该如何做这项工作？
这工作:)（我希望多浏览器，Firefox喜欢它）
li { display: inline; list-style-type: none; } li:after { content: ", "; } li:last-child:before { content: "and "; } li:last-child:after { content: "."; }
<html> <body> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </body> </html>
我喜欢这个<menu>元素中的列表项。 考虑以下标记：
<menu> <li><a href="/member/profile">Profile</a></li> <li><a href="/member/options">Options</a></li> <li><a href="/member/logout">Logout</a></li> </menu>
我用下面的CSS来devise它：
menu > li { display: inline; } menu > li:after { content: ' | '; } menu > li:last-child:after { content: ''; }
这将显示：
Profile | Options | Logout
由于马丁·阿特金斯（Martin Atkins）对他的评论的解释，这是可能的
一个古老的线索，但有人可能从中受益：
li:not(:last-child)::after { content: ","; } li:last-child::after { content: "."; }
这应该在CSS3和[未经testing] CSS2中工作。
你可以结合伪元素！ 对不起，我在发布这个问题后不久就想到了这个。 可能由于兼容性问题而不太常用。
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }
这运作顺畅。 CSS是一种惊人的。
只要提到，在CSS 3
：后
应该像这样使用
：：后
从https://developer.mozilla.org/de/docs/Web/CSS/::after ：
在CSS3中引入了::之后的符号，以便在伪类和伪元素之间build立区分。 浏览器也接受这个符号：在CSS 2中引入之后。
所以它应该是：
li { display: inline; list-style-type: none; } li::after { content: ", "; } li:last-child::before { content: "and "; } li:last-child::after { content: "."; }
为这个问题增加另一个答案，因为我需要的是@derek所要求的，而且在看到这里的答案之前我已经有了更多的了解。 具体来说，我需要的CSS也可以考虑与两个列表项的情况下，不需要逗号。 作为一个例子，我想制作一些作者的副标题如下：
一位作者： By Adam Smith.
两位作者： By Adam Smith and Jane Doe.
三位作者： By Adam Smith, Jane Doe, and Frank Underwood.
这里已经给出的解决scheme适用于一个作者和三个或更多的作者，但忽略了两个作者的情况 – “牛津逗号”风格（在一些地方也被称为“哈佛逗号”风格）不适用 – 即在连词之前不应该有逗号。
经过一个小时的修补之后，我想出了以下几点：
<html> <head> <style type="text/css"> .byline-list { list-style: none; padding: 0; margin: 0; } .byline-list > li { display: inline; padding: 0; margin: 0; } .byline-list > li::before { content: ", "; } .byline-list > li:last-child::before { content: ", and "; } .byline-list > li:first-child + li:last-child::before { content: " and "; } .byline-list > li:first-child::before { content: "By "; } .byline-list > li:last-child::after { content: "."; } </style> </head> <body> <ul class="byline-list"> <li>Adam Smith</li> </ul> <ul class="byline-list"> <li>Adam Smith</li><li>Jane Doe</li> </ul> <ul class="byline-list"> <li>Adam Smith</li><li>Jane Doe</li><li>Frank Underwood</li> </ul> </body> </html>
它显示旁边，因为我有他们上面。
最后，我还不得不摆脱li元素之间的任何空白，以避免烦恼：inline-block属性会在每个逗号之前留出空格。 有可能是另一个体面的黑客攻击，但这不是这个问题的主题，所以我会离开这个为别人回答。
小提琴： http : //jsfiddle.net/5REP2/
我在媒体查询中使用相同的技术，可以有效地将子弹列表转换为较小设备上的内联列表，因为它们节省了空间。
所以从以下的变化：
- 列表项目1
- 列表项目2
- 列表项目3
至：
清单项目1; 清单项目2; 清单项目3。
