Css 如何创建一个由条分隔的菜单，但第一项和最后一项没有条？

如何实现这种菜单：

关于|隐私|联系|网站地图

。。。由竖条分隔的菜单，但第一项和最后一项的左右两侧没有横条（如示例所示）

菜单项是动态生成的（在wordpress中使用），而不是手动生成的

---

谢谢。

垂直条只是键盘上的一个字符，因此您可以在单词之间键入它。

如果您使用列表项作为导航标记，您可以通过在

li

上创建分隔符作为背景图像来在每个链接之间显示一行

使其仅出现在列表项之间的技巧是将图像定位到

li

的左侧，而不是第一个。此示例使用相邻选择器：

这个CSS将图像添加到另一个列表项后面的每个列表项中——换句话说，除了第一个列表项之外，所有列表项都会添加图像

或者您可以将CSS

content

属性与

before

伪类一起使用，而不是使用图像。以下代码在导航链接之前添加管道（再次使用相邻的选择器）

请注意，IE6和IE7不支持content属性，IE6也不支持相邻选择器

---

有关CSS内容和浏览器兼容性，请参见此处-

为wordpress找到了一个更简单的解决方案

---

只需转到外观>菜单，并在菜单每个标题的导航标签末尾添加“|”

我认为最好的方法是使用CSS类

表面上→ 菜单：

单击屏幕选项

检查CSS类

将“last”类添加到最后一个菜单项中 然后在style.css中添加：

#导航li.last span{
显示：无；
}

---

谢谢但是，菜单项是动态生成的（在wordpress中使用），而不是手动生成的。好的，我已经把这些信息放回了问题中。我明白了，我会注意这一点。但是有没有办法不使用背景图像呢？“前css”或“后css”属性有帮助吗？我将使用wordpress菜单中的菜单，因此菜单项是动态生成的。我已更新了答案，以包括此替代方法，虽然我个人觉得使用背景图像更灵活。+1虽然

边框右侧：实心1px#000

代替第一个CSS声明中的

背景

，如果只需要一个管道字符或类似的东西，就可以删除HTTP请求以达到相同的效果（没有第二种方法带来的潜在兼容性问题）谢谢，第二种方法暂时有效。虽然当链接悬停时，垂直条被包含并“突出显示”，但该方法暂时有效。稍后将探讨使用背景图像。

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

#nav li + li a:before {
    content: "|";
}