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都有display:inline时都可以，但是当我向第display:none个范围添加item的类时，结果如下所示：< / p>

值1 ,,值2

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

有什么想法吗？

UPDATE。截至目前，所有提议的解决方案都错过了item跨度中的任何一个都可以隐藏或可见的事实，而不仅仅是第二个。问题不仅在于中间的双逗号，而且还有一个额外的逗号。

Answer 1

只用CSS的简单解决方案：

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

http://jsfiddle.net/8aEhz/

Answer 2

这就是你要追求的吗？

http://jsfiddle.net/whQxW/

.hidden {
    display: none;
}

.hidden + .delim {
    display: none;
}

它给出了

值1，值3

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

Answer 3

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

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

解决方案是使用所谓的general sibling selector：

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

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

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

4 个答案: