组合CSS伪元素，“：after” “：last-child” [英] Combining CSS Pseudo-elements, ":after" the ":last-child"
问题描述
我想使用CSS语法正确列表。这是我到目前为止：
< li> 标签水平显示，
li {display：inline; list-style-type：none; }
li：after {content：，; }
这样有效，但我想last-child有一个句点而不是逗号。如果可能，我想在最后一个孩子之前加上和。我样式的列表是动态生成的，所以我不能只给last-children一个类。你不能组合伪元素，但这基本上是我想实现的效果。
li：last-child li：before {content ：and; }
li：last-child li：after {content：。 }
这样工作:)（我希望多浏览器，Firefox喜欢它）
< html&
< head>
< style type =text / css>
li {display：inline; list-style-type：none; }
li：after {content：，; }
li：last-child：before {content：和; }
li：last-child：after {content：。; }
< / style>
< / head>
< body>
< ul>
< li>一个< / li>
< li>两个< / li>
< li>三< / li>
< / ul>
< / body>
< / html>
I want to make "grammatically correct" lists using CSS. This is what I have so far:
The <li> tags are displayed horizontally with commas after them.
li { display: inline; list-style-type: none; }
li:after { content: ", "; }
That works, but I want the "last-child" to have a period instead of a comma. And, if possible, I'd like to put "and" before the "last-child" as well. The lists I'm styling are generated dynamically, so I can't just give the "last-children" a class. You can't combine pseudo-elements, but that's basically the effect I want to achieve.
li:last-child li:before { content: "and "; }
li:last-child li:after { content: "."; }
How do I make this work?
This works :) (I hope multi-browser, Firefox likes it)
<html>
<head>
<style type="text/css">
li { display: inline; list-style-type: none; }
li:after { content: ", "; }
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }
</style>
</head>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>
这篇关于组合CSS伪元素，“：after” “：last-child”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
