在布局网站时，我经常想做的一件事是让一些元素相邻，两者之间有分隔符。例如，如果我有3个元素，我想要两个分隔符之间，任何一方都没有。
我以各种方式实现这一点。对于元素的垂直堆叠，我有时使用< 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文件中获取样式。
解决方法
用这个：
#menu span + span {
border-left: solid black 1px;
}
http://jsfiddle.net/thirtydot/QxZ6D/
除了第一个跨度之外，这将适用于所有边界。
除IE6之外，所有现代浏览器都支持adjacent sibling selector()。
另一种方法是这样做，这有时更好，因为您可以将“菜单按钮”的所有声明保留在一个块中：
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，因为：IE7 / 8中支持first-child(来自CSS2)，并且：last-child(仅在CSS3中引入)不是。
