没有 hack 的元素之间的分隔符

Question

在布局网站时，我经常想做的一件事是让一些元素彼此相邻，并在它们之间使用分隔符。例如，如果我有三个元素，我希望它们之间有两个分隔符，并且两端什么都没有。

我以各种方式实现这一目标。对于元素的垂直堆叠，我有时会使用 <hr /> 。水平地，我可能会做类似的事情：

 <div>
    <span class="notend">things</span>
    <span class="notend">stuff</span>
    <span>items</span>
</div>

.notend {
    border-right: solid black 1px;
}

有没有更语义化的方式来做到这一点？我想在元素之间使用分隔符，而不将样式元素放入 HTML 部分，或使用非语义类。我不介意这需要 hacky CSS，我只是想从 HTML 文件中获取与样式相关的东西。

原文由 Oliver 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

用这个：

 #menu span + span {
    border-left: solid black 1px;
}

http://jsfiddle.net/thirtydot/QxZ6D/

这将适用于 border-left 除第一个 span 之外的所有内容。

除了 IE6 之外，所有现代浏览器都支持 相邻兄弟选择器( + )。

---

另一种方法是这样做，有时更好，因为您可以将“菜单按钮”的所有声明保存在一个块中：

http://jsfiddle.net/thirtydot/QxZ6D/1/

 #menu span {
    border-left: solid black 1px;
    /*
    a: bunch;
    of: stuff;
    */
}
#menu span:first-child {
    border-left: 0
}

这与第一个解决方案具有完全相同级别的浏览器支持。

请注意，如果您喜欢此解决方案，最好使用 :first-child 而不是 :last-child ，因为 :first-child 支持 :last-child 8 --- （仅在 CSS3 中引入！）不是。

原文由 thirtydot 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你也可以这样做：

 span {position:relative; margin-left:5px}

span:after {
    content:"|";
    position:absolute;
    left:-5px;
}
span:first-child:after {
    content:"";
}

在这种方法中，您还可以使用其他分隔符，如 / ， \ ， .

http://jsfiddle.net/sandeep/UNnxE/

原文由 sandeep 发布，翻译遵循 CC BY-SA 4.0 许可协议