css - 可能隐藏的跨度之间的分隔符

Question

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

<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>

item当 all of has时没关系，但是当我向第二个spandisplay:inline添加一个类时，结果如下所示：display:noneitem

值 1, , 值 2

我在 CSS 中找不到这个问题的解决方案，并且不希望使用 JS（切换可见性的代码已经非常复杂）。

有任何想法吗？

更新。截至目前，所有提出的解决方案都忽略了一个事实，即任何item跨度都可以隐藏或可见，而不仅仅是第二个。问题不仅在于中间的双逗号，还在于末尾的额外逗号。

Answer 1

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

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

http://jsfiddle.net/8aEhz/

Answer 2

那是因为具有该值的跨度不是分隔跨度的父级。为了在隐藏值范围时隐藏分隔符，您必须将它们包含在值范围内，如下所示：

<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>

Answer 3

这就是你所追求的吗？

http://jsfiddle.net/whQxW/

.hidden {
    display: none;
}

.hidden + .delim {
    display: none;
}

它给

价值 1，价值 3

这看起来像是对兄弟选择器的一个很好的介绍：http: //css-tricks.com/child-and-sibling-selectors/。您可能应该了解它们——它们非常强大。

Answer 4

解决方案是使用所谓的通用兄弟选择器：

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

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