Css 可能隐藏的跨距之间的分隔符

我有许多跨度，形成一个枚举：

<span class="item">Value 1</span><span class="delim">, </span>
<span class="item">Value 2</span><span class="delim">, </span>
<span class="item">Value 3</span>

值1，
值2，
价值3

当所有

item

都有

display:inline

时是可以的，但是当我将一个带有

display:none

的类添加到第二个

item

span时，结果如下所示：

值1，值2

我无法在CSS中找到这个问题的解决方案，使用JS是不可取的（切换可见性的代码已经非常复杂）

有什么想法吗

---

更新。截至目前，所有建议的解决方案都忽略了一个事实，即任何

项

跨度都可以隐藏或可见，而不仅仅是第二个跨度。问题不仅是中间的双逗号，最后也是一个额外逗号。

这是因为值的跨度不是定界跨度的母。为了在隐藏值范围时隐藏分隔符，必须将它们包含在值范围内，如下所示：

<span class="item">Value 1<span class="delim">, </span></span>
<span class="item">Value 2<span class="delim">, </span></span>
<span class="item">Value 3</span>

值1，
值2，
价值3

这就是你想要的吗

它给

值1，值3

---

这看起来是对兄弟选择器的一个很好的介绍：。您可能应该了解它们-它们非常强大。

仅使用CSS的简单解决方案：

.item:before{
    content: ", ";
}
.item:first-child:before{
    content: "";
}

---

解决方案是使用所谓的：

---

逗号仅插入在那些可见项之前，这些可见项的父项有另一个可见项作为子项，并且该子项在文档中位于我们的前面。

这将隐藏

之后的所有
.delim
元素。hidden

元素：选择器应为

.hidden+.delim

@我的头痛谢谢你指出这一点。更新了我的答案：）没问题。这是另一个关于选择器的优秀链接，我想你可能会喜欢-当然，我已经尝试过兄弟选择器，但这不是一个合适的解决方案：尝试一个只有第一个项目没有隐藏的情况-它后面会有一个逗号。如果第一个项目被隐藏，它就不适合。这如何解决问题，使用额外的逗号？Nah，

delim

跨距位于“我的代码”中的

项

跨距内（它们在his中是分开的）。这意味着当他隐藏

项

时，子

delim

也被隐藏：）如果第一个和第二个

项

跨距可见，第三个跨距隐藏，最后会有一个逗号-这不是我想要的。@AndreiSmolensky啊，我们允许使用jQuery吗？这个问题可以用JS轻松解决，但我对纯HTML/CSS解决方案感兴趣。

.item:before{
    content: ", ";
}
.item:first-child:before{
    content: "";
}

.item.active ~ .item.active:before {
    content: ', ';
}