删除最后一项和第一项的分隔符

你不能在每边用2倍的左边距而不是1倍,然后用CSS伪类吗 :first-child 要删除第一个项目的这些边距吗?

编辑:我同意这样一个事实,即您应该使用边框作为分隔符,而不是背景,但如果出于某些好的原因这样做,我的回答仍然有效:—)

以下规则将应用于其他.menu-item元素之后的所有.menu-item元素:

.menu_item + .menu_item {
  border-left: 2px solid black;
}

最简单的方法是用自定义类标记第一个和最后一个元素,并从中删除这些元素的边距。

<ul class="menu">
  <li class="first">One</li>
  <li>Two</li>
  <li>Three</li>
  <li class="last">Four</li>
</ul>
<style>
  .menu li { margin: 0 1px; }
  .menu .first { margin-left: 0; }
  .menu .last { margin-right: 0; }
</style>

您也可以尝试使用复杂的CSS选择器,例如 :first-child 但在旧版本的MSIE中不起作用。

或者,您可以在右边使用2倍的页边距,并且只使用一个附加类:

<ul class="menu">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li class="last">Four</li>
</ul>
<style>
  .menu li { margin-right: 2px; }
  .menu .last { margin-right: 0; }
</style>

如果您的访问者中有很大一部分支持CSS3,则可以使用 :first-child and :last-child pseudo-classes :

div#menu div:first-child {
margin-left: none;
}
div#menu div:last-child {
margin-right: none;
}