gpt4 book ai didi

css - 结合CSS伪元素, ":after" ":last-child"

转载 作者:数据小太阳 更新时间:2023-10-29 09:06:22 24 4
gpt4 key购买 nike

我想使用 CSS 制作“语法正确”的列表。这是我目前所拥有的:

<li>标记水平显示,后面有逗号。

li { display: inline; list-style-type: none; }

li:after { content: ", "; }

这行得通,但我希望“last-child”有句点而不是逗号。而且,如果可能的话,我也想在“last-child”之前加上“and”。我设计的列表是动态生成的,所以我不能只给“last-children”一个类。你不能组合伪元素,但这基本上就是我想要达到的效果。

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>

关于css - 结合CSS伪元素, ":after" ":last-child",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2351623/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com