需求描述

这里有几个人名，真实情况下他们会是循环出来的，这里只是模拟。现在一个需求就是人名之间加上一个顿号，不管有多个少个人名，第一个人名前面没有，中间有

<!DOCTYPE html>
<html>
    <body>
        <span>张三</span>
        <span>李四</span>
        <span>王五</span>
    </body>
</html>

下面给出一个比较好玩的实现方法

实现方法

<!DOCTYPE html>
<html>
    <head>
        <style>
            .item+.item::before {
                content: '、'
            }
        </style>
    </head>
    <body>
        <span class="item">张三</span>
        <span class="item">李四</span>
        <span class="item">王五</span>
    </body>
</html>

说明：

找到第2个以及后面的span(.item)标签，并在其前追加顿号

效果图：

用到的两个选择器

伪元素选择器

就是有连续两个冒号的选择器，如::first-line、::first-letter、::before和::after
可以帮我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
伪元素选择器使用场景1:伪元素字体图标
伪元素选择器使用场景2:清除浮动，在盒子模型中，对最后一个元素追加伪元素

相邻兄弟选择器

仅仅选择当前元素相邻的那个合乎规则的兄弟元素。+连接。
相邻兄弟选择器可选择紧接在另一个元素后的元素，而且二者具有相同的父新元素。
前后选择符的关系是兄弟关系，即在HTML结构中，两个标签前为兄后为北，否则样式无法应用

总结

首先，学习了CSS的两个选择器（伪元素选择器和相邻兄弟选择器）以及一个新技能；第二也给后来者挖了个坑呀，后期维护，产品说把逗号去掉，接收代码的人如果不去看审查元素，想不明白逗号哪来的。

CSS里给多个词语加逗号的一个方法

需求描述

实现方法

用到的两个选择器

总结