CSS-第n个子/类型或javascript

我希望在我的所有子元素上显示逗号，在最后一个条目之前显示“and”，并在末尾显示句号

所以我希望它能显示。。。你搜索了A、B、C、D和E

目前我只能把它展示出来。。。。A、 B、C、D和E

我可以使用nth添加逗号和句号等，但有一个问题我无法解决，那就是在最后一个元素的第二个元素中，它显示了逗号和“and”，我可以将最后一个元素作为目标，因为在下面的示例中它是红色的，但我无法将其删除逗号

表单中可能有1到9个条目。有人能帮忙吗。作为JS解决方案更好吗

ul.yousearchedfor li:not(:empty):not(:last-child):after {
  content: ", ";
}
ul.yousearchedfor li:after {
  content: ",";
}
  

ul.yousearchedfor li:nth-last-child(2) {
  content: "";
  color: red;
}
ul.yousearchedfor li:last-child:before {
  content: "and ";
}
ul.yousearchedfor li:last-child:after {
  content: ".";
}

---

上面我的评论的代码

要点是在第二个和下一个元素之前添加逗号，而不是在最后一个元素之后添加逗号

li{列表样式：无；显示：内联块；}
ul.yousearchedLi+li:不是（：最后一个孩子）：之前{
内容：“，”；
}
ul.yousearched李：第n个孩子（2）{
内容：“；
颜色：红色；
}
ul.yousearchforli+li:最后一个孩子：之前{
内容：“\00a0和”；
}
李：最后一个孩子：之后{
内容：“.”；
}

您搜索了
A


您搜索了
A
B


您搜索了
A
B
C


您搜索了
A
B
C
D
E

您可以使用转义的unicode字符（如

/a0

）添加此逗号

只要CSS slow的顺序正确，您甚至不需要检查类似于

：not（：last child）

的任何内容，因为以下样式将解释最后一个子项。我还从您的

ul中删除了
content
属性。您搜索了li:n最后一个子项（2）

选择器，因为

content

属性仅受伪元素支持，此处不需要

这是成品，有或没有牛津逗号：

没有牛津逗号

body，ul{margin:0；padding:0；}
li{列表样式：无；显示：内联块；}
ul.yousearchedLi+li:：在{content:“，”；}之前
ul.yousearched寻找李：第n个孩子（2）{颜色：红色；}
ul.yousearchedforli:last child:：before{content:“\a0 and”；”}
ul.yousearchedforli:last child:：在{content:“.”之后}

---

ul.yousearched li:not（：empty）：not（：last child）：在
ul.yousearched li+li:not（：last child）之后你应该使用
ul.yousearched li+li:not（：last child）：在{content:'之前，'}
（在第二、第三、第四和最后一个元素之前加逗号）.我个人喜欢牛津逗号。谢谢你的帮助，非常感谢。然而，我认为我不够理智。可能只有一个条目。在这种情况下（据我所知），它将显示您搜索到的和A。无论如何，围绕这个问题？@user13928344:这是一个非常简单的更新。现在检查答案。谢谢@Pavel。最后一个例子很有效！