组合CSS伪元素，“：在”":last-child“之后”
组合CSS伪元素，“：在”":last-child“之后”
提问于 2010-03-01 00:06:14
我想用CSS制作“语法正确”的列表。这就是我到目前为止所知道的：
<li>标记水平显示，后跟逗号。
li { display: inline; list-style-type: none; }
li:after { content: ", "; }
这是可行的，但我希望“最后一个孩子”有一个句号而不是逗号。而且，如果可能的话，我也想把" And“放在”最后一个孩子“之前。我设计的列表是动态生成的，所以我不能只给“最后一个孩子”一个类。您不能组合伪元素，但这基本上就是我想要达到的效果。
li:last-child li:before { content: "and "; }
li:last-child li:after { content: "."; }
我该怎么做呢？
回答 3
Stack Overflow用户
发布于 2010-03-01 00:14:26
这是可行的:) (我希望多浏览器，火狐会喜欢它)
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>
Stack Overflow用户
发布于 2011-12-10 14:47:28
对于元素中的列表项，我喜欢这样做。考虑以下标记：
<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设置它的样式：
menu > li {
display: inline;
}
menu > li::after {
content: ' | ';
}
menu > li:last-child::after {
content: '';
}这将显示：
Profile | Options | Logout这是因为马丁·阿特金斯在他的comment上解释的
请注意，在CSS2中，您将使用:after，而不是::after。如果使用CSS3，则使用::after (两个半列)，因为::after是一个伪元素(单个半列用于伪类)。
Stack Overflow用户
发布于 2015-09-16 18:06:18
一个旧的线程，尽管如此，有些人可能会从中受益：
li:not(:last-child)::after { content: ","; }
li:last-child::after { content: "."; }这应该可以在CSS3和未经测试的CSS2中工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2351623
复制相关文章
相似问题