html - 使用 li + li 进行导航分隔符清除第一项后的背景

Question

我正在使用 a 进行水平导航，并且感谢问题：Separators For Navigation，我读到了一种使用li + li（伪？）选择器设置基于图像的项目分隔符的好方法。

在我的代码中，我为<li>标签定义了一个背景图像，但是一旦我添加了li + li代码，分隔符就会出现，但是第li一个标签之后的所有标签的背景都消失了。如果我删除#nav-items li+li代码，所有项目的背景都会恢复（但显然我没有分隔符）

（截屏）

我的代码如下所示：

<ul id="nav-items">
  <li class="nav-item"><a href="#" title="Home">Home</a></li>
  <li class="nav-item"><a href="#" title="About Us">About Us</a></li>
  etc...
</ul>

和我的CSS：

#nav-items {
    list-style-type: none;
}

.nav-item {
    display: list-item; 
    float:left;
    width: 150px;
    height: 39px;
    background: url('../images/top-nav-bg.png');
    background-repeat: repeat-x;
    padding: 9px 20px;
    color: #fff;
    font-family: 'Oxygen', sans-serif;
    letter-spacing: 1px;
    font-weight: 300;
}

#nav-items li+li {
    background:url('../images/top-nav-separator.png') no-repeat top left; 
}

我究竟做错了什么？

Answer 1

#nav-items li+li:before{
    background:url('../images/top-nav-separator.png') no-repeat top left; 
    content:"";
    position:absolute;
    left:0;
    top:0;
    display:block;
    width:3px   /* your image width */
    height:57px   /* your image height */
}